Почему this.setState не обновляет объект состояния?

Question

Я использую простой метод в компоненте React.После вычисления значений я хочу установить их для объекта состояния и перерисовать компонент.

Вот соответствующий код:

`class ManageAuthors extends Component {
  state = {authors: [], allAuthors: []};

  authorLists = allPotentialAuthors => {
    const allAuthors = allPotentialAuthors.map(mem => ({...mem, isCurrent: true});
    const authors = this.props.authors.filter({_some other filter code_});
    this.setState({authors, allAuthors});
};

  render() {
    const {authors, allAuthors} = this.state;
    console.log('state:', authors, allAuthors);
    return (
      <Query query={query}>
        {({loading, data}) => {
          if (!loading && data) {
            this.authorLists(data.authors)
          }
          return (_stuff to return_);
        }}
      </Query>
    );
  };
};`

Запрос запускается правильно и возвращает данные, и эти данныеотправлено методу authorLists.Каждая из переменных const вычисляет правильные значения.Но когда должен быть вызван метод this.setState, на самом деле ничего не обновляется.Как будто this.setState метод даже не стреляет.Есть ли что-то, что помешало бы методу this.setState работать / обновлять объект локального состояния?

Answer 1

setState не всегда обновляет состояние сразу.Если вам нужен доступ к этой переменной сразу же, вы можете передать функцию setState и поиграть с этой переменной там.

Например:

this.setState({authors, allAuthors}, () => {
   //do something with authors or allAuthors or both
   console.log(authors); console.log(allAuthors); //log it to see if you get desired result
  }
);

Документация React объясняет эту ловушку:

setState () не всегда сразу обновляет компонент.Это может пакетировать или отложить обновление до позже.Это делает чтение this.state сразу после вызова setState () потенциальной ловушкой.Вместо этого используйте componentDidUpdate или обратный вызов setState (setState (updater, callback)), любой из которых гарантированно сработает после применения обновления.

Подробнее об этом можно прочитать здесь .Или поиск "setState" на сайте документации React.

Answer 2

Правильно ниже строки:

this.setState({authors, allAuthors});

до

this.setState({authors: allAuthors});