我在我的组件中设置了一个效果,如果另一个状态属性发生变化,它会改变视图。但是由于某种原因,当组件挂载时,即使 的值detailIndex
没有改变,效果也会运行。
const EventsSearchList = () => {
const [view, setView] = useState('table');
const [detailIndex, setDetailIndex] = useState(null);
useEffect(() => {
console.log('onMount', detailIndex);
// On mount shows "null"
}, []);
useEffect(
a => {
console.log('Running effect', detailIndex);
// On mount shows "null"!! Should not have run...
setView('detail');
},
[detailIndex]
);
return <div>123</div>;
};
为什么会这样?
更新:如果不清楚,我正在尝试的是在组件因detailIndex
更改而更新时运行效果。不是在安装时。
useEffect
默认情况下,React Hooks 会在每次渲染时执行,但您可以在函数中使用第二个参数来定义何时再次执行效果。这意味着该函数始终在挂载时执行。在您的情况下,您的第二个useEffect
将在开始和detailIndex
更改时运行。
更多信息:https : //reactjs.org/docs/hooks-effect.html
来源:
有经验的 JavaScript 开发人员可能会注意到,传递给 useEffect 的函数在每次渲染时都会有所不同。[...] 如果某些值在重新渲染之间没有改变,你可以告诉 React 跳过应用效果。为此,将数组作为可选的第二个参数传递给 useEffect: [...]
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句