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

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
    })
  }

}