多个效果挂钩的多个状态更改

问题描述 投票:1回答:1

我似乎找不到一个场景的好模式......

可以说我们在组件中有这样的顺序:

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. 如何从多种效果中更改多个状态?关于它有一些好的模式吗?我们是否应该将所有状态更改重新组合成单​​个效果钩子或将所有“块”打包成单个状态的整体对象并将其从单个位置更改?

任何建议和最佳实践将不胜感激。

[UPDATE]

我很抱歉。

我正在测试不同版本并发布了错误的代码示例。这是导致错误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被调用从而导致错误。对?

reactjs react-hooks
1个回答
2
投票

为避免“渲染的钩子少于预期”错误,您需要在useEffect语句之后放置if钩子。

© www.soinside.com 2019 - 2024. All rights reserved.