Многократные изменения состояния от нескольких ловушек эффектов - PullRequest
Новая
       1

Многократные изменения состояния от нескольких ловушек эффектов

1 голос
/ 11 апреля 2019

Я не могу найти хороший шаблон для одного сценария ...

Допустим, у нас есть такой порядок в компоненте: 

const component = ({propslist}) => {
const [state1, changeState1] = useState();
const [state2, changeState2] = useState();

useEffect(() => {
  //this effect does something and updates state 1
  const someVar = someOperation();
  changeState1(someVar);
});

useEffect(() => {
  //this effect does something and updates state 2
  const someVar = someOtherOperation();
  changeState2(someVar);
});

return (<div>...</div>);
}

Теперь, если я понимаюправильно и из того, что я вижу в своих тестах, в момент, когда useEffect изменяет состояние, компонент будет повторно отображаться.То, что заставляет меня думать так, это то, что если я скажу так, я получу ошибку: Rendered fewer hooks than expected.

2 вопроса:

  1. Это тот случай, когда что-то меняетсясостояние, в котором компонент останавливает выполнение и переходит в повторный рендеринг?
  2. Как изменить несколько состояний из нескольких эффектов?Есть ли какая-то хорошая модель об этом?Должны ли мы что-то переделывать, чтобы упаковать все изменения состояния в единый хук эффектов или упаковать все «куски» в монолитный объект одного состояния и изменить его из одного места?

Буду признателен за любые предложения и рекомендации.

[ОБНОВЛЕНИЕ]

Мои извинения.

Я тестировал разные версии и отправил пример неправильного кода.Это пример кода, который вызывает ошибку Rendered fewer hooks than expected.: 

const component = ({propslist}) => {
const [state1, changeState1] = useState();
const [state2, changeState2] = useState();

if(someCondition)
  changeState1(something);

useEffect(() => {
  //this effect does something and updates state 2
  const someVar = someOperation();
  changeState2(someVar);
});

return (<div>...</div>);
}

Итак, я предполагаю, что вызов changeState1() немедленно запускает повторный рендеринг и предотвращает вызов useEffect, вызывая ошибку.Правильно?

1 Ответ

2 голосов
/ 11 апреля 2019

Чтобы избежать ошибки «Обработано меньше хуков, чем ожидалось», вам необходимо поставить useEffect хуки после оператора if.

...