Question

在一种情况下，我似乎找不到合适的模式...

让我们说我们在组件中有这种顺序：

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个问题：

是在某些情况发生变化时组件停止执行并重新渲染的情况吗？
如何从多种效果更改多种状态？是否有一些好的模式？我们应该重塑事物以将所有状态更改打包到单个效果挂钩中还是将所有“块”打包到单个状态整体对象中并从单个位置更改它？

任何建议和最佳做法将不胜感激。

[更新]

我很抱歉。

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

Answer 1

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

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

1 个答案: