Как обновить один элемент состояния на основе других изменений состояния?

Question

Я использую контекст реакции для управления отображением / скрытием некоторых элементов, поскольку эти элементы зависят от данных, возвращаемых несколькими вызовами сервера.Как правильно обновлять состояние контекста, основываясь на других изменениях состояния?

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

componentDidUpdate(prevProps, prevState) {
  this.setState({
    showX: (
      prevState.a &&
      prevState.b &&
      prevState.c
    ),
    showY: (
      prevState.d
    )
  })
}

Answer 1

Вы должны вызывать setState в пределах componentDidUpdate только с условным оператором, который проверяет, действительно ли изменяется реквизит или состояние.Также получите логическое значение, используя !! или Boolean constructor

componentDidUpdate(prevProps, prevState) {
  const { a, b, c, d } = this.props;
  if (a !== prevState.a || b !== prevState.b || c !== prevState.c || d !== prevState.d) {
    this.setState({
      showX: !!(
        prevState.a &&
        prevState.b &&
        prevState.c
      ),
      showY: !!prevState.d
    })
  }

}