我似乎找不到一个场景的好模式......
可以说我们在组件中有这样的顺序:
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个问题:
任何建议和最佳实践将不胜感激。
[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
被调用从而导致错误。对?
为避免“渲染的钩子少于预期”错误,您需要在useEffect
语句之后放置if
钩子。