This.setState не меняет состояние

Итак, я пытаюсь изменить состояние, используя предыдущее состояние, но ничего не меняет. Кто-нибудь может сказать мне, в чем проблема, пожалуйста?

handleToggleComplete = (key, complete) => {


       itemIndex = this.state.items.findIndex(item => item.key === key);

       console.info('before: ', this.state.items);

       this.setState(prevState => {
         return {
           ...prevState,
             items: [
               ...prevState.items,
               prevState.items[itemIndex]: {
               completed: true,
               text: 'hardcoded value'
             }
           ]
         }
       });

       console.info('after: ', this.state.items);
   }

Журналы:

before:  
[{…}]

{key: 1530370127933, completed: false, text: "some value"}

after:  
[{…}]

{key: 1530370127933, completed: false, text: "some value"}

reactjs react-native

30.06.2018 16:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

this.setState не меняет состояние сразу. Он повторно отображает компонент с обновленным состоянием. Поэтому, естественно, вы не увидите обновленное состояние в своей функции.

Вот приложение, которое демонстрирует именно это. Я отобразил в консоли текущее значение состояния и визуализирую его кнопкой:

class App extends React.Component {

  constructor (props) {
    super(props)
    this.state = {
      myState: 0
    }
  }
  
  handleClick () {
     let incrementState = this.state.myState + 1
     console.info('State before increment:', this.state.myState)
     this.setState({myState: incrementState})
    console.info('State AFTER increment:', this.state.myState, '\nSee, it\'s still the same BUT the component has been updated (look at the number)!')
  }
  
  render() {
    const { myState } = this.state
    return (<div>
        <h1>{myState}</h1>
        <button onClick = {() => this.handleClick()}>Increment State</button>
      </div>);
  }

}

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "app"></div>

30.06.2018 17:05

Другие вопросы по теме

Как эффективно отображать различные виды в FlatList

Почему реагируют родные зависания на 59%?

React Native BackgroundImage не отображает требуемые файлы GIF - iOS

Ограничение движений PanResponder React Native

Метод запроса асинхронного глобального API ReactJS, как обрабатывать ответ?

Укладка карт в React Native

Пользовательский заголовок React Navigation

React Native: как запустить удаленную выборку при переключении обратно на вкладку в зависимости от состояния

Использование состояний в реакции-навигации без сокращения

Невозможно передать Arraylist в собственную библиотеку модулей в React Native

This.setState не меняет состояние

Ответы 1

Другие вопросы по теме

Похожие вопросы