Можно ли вызвать setState из shouldComponentUpdate?

в ответ на изменение состояния я хочу вызвать другое изменение состояния. Это изначально плохая идея?

конкретный вид сценария заключается в том, что компонент моделируется как машина состояния, которая отображает различную информацию в соответствии со значением this.state.current_state. Но внешние события могут побудить его испытать переход в состояние через изменения в его состоянии через хранилище потоков. Вот надуманный сценарий, чтобы получить идею:

Я думаю, правильный жизненный цикл метод для этого будет shouldComponentUpdate. Что-то в этом роде:--6--> 

shouldComponentUpdate: function(nextProps, nextState) {
    if (nextState.counter > 4 && this.state.current_state !== DISPLAY_MANY) {
        this.setState({ current_state: DISPLAY_MANY });
    }
    return true;
}

в некотором дочернем компоненте,counter может увеличиваться, поэтому Вместо вывода того, что он будет отображать на основе значения некоторых counter переменная, я хотел бы кодировать состояния явно.

реальный сценарий сложнее, чем это, но, надеюсь, этот сценарий достаточно подробный, чтобы получить идею. Нормально ли делать то, о чем я думаю?

EDIT: исправлен пример кода для избегайте запуска бесконечного цикла, добавив дополнительное условие состояния

8
flux reactjs reactjs-flux

2 ответов

shouldComponentUpdate предназначен специально для определения, должен ли компонент обновляться вообще. Делать такие вещи, как:

if (nextState.counter == this.state.counter && nextProps.foo == this.Props.foo) {
  return false;
}

componentWillReceiveProps для ответа на внешний (реквизит) изменения. Нет эквивалента componentWillReceiveState, как указано в документации. Ваш компонент (и только ваш компонент) запускает собственные изменения состояния, обычно через одно или несколько из следующих событий:

  • начальный рендеринг в getInitialState
  • обновили реквизит в componentWillReceiveProps
  • взаимодействие с пользователем в <input> поля и т. д., Например, в custom onChangeInput() функции в компоненте.
  • in flux: реагирование на изменения хранилища из прослушивателей, как правило, в пользовательских функциях, вызывающих getStateFromStores(), где состояние обновляется.

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

в вашем случае вы можете переместить логику (чтобы определить, нужно ли обновлять состояние) в getStateFromStores() функция, где вы обрабатываете обновления магазина.
Или вы можете просто оставить его в состоянии и изменить функцию рендеринга, чтобы она отображалась по-другому, если counter > 4.

11

нет. Пожалуйста, используйте . Он имеет такую же подпись shouldComponentUpdate и вы можете позвонить this.setState там.

7