所以,在使用一个调用依赖于状态的函数的useEffect
时,我遇到了以下情况。
例子:
// INSIDE APP COMPONENT
const [someState, setSomeState] = React.useState(0);
const [someTrigger, setSomeTrigger] = React.useState(false);
function someFunction() {
return someState + 1;
}
React.useEffect(() => {
const newState = someFunction(); // 'someFunction' IS BEING CALLED HERE
setSomeState(newState);
},[someTrigger])
问题:
在这种情况下,我应该将someFunction
声明在useEffect()
中还是安全保险起见将其放在组件体内但是useEffect()
外部?
我可以将其添加到dependency
数组中,但这会损害我的代码可读性,因为我想专注于trigger
。
useEffect()
将在新的渲染后运行,我是否可以安全地假设它将具有我在其中调用的函数的最新副本?
是否有一个基本规则,告诉我们何时应在useEffect
钩子中声明函数,或者什么情况下必须将其添加到依赖项数组中?
编辑: 请注意,useEffect
需要拥有这些函数的最新副本,因为这些函数需要访问一些最新的、最新的state
变量。
注意:
该代码在CodeSandbox上触发以下eslint警告。尽管它完美无缺。
React Hook React.useEffect has a missing dependency: 'someFunction'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)eslint
真实案例场景:
这只是一个简单的示例。在我的真实情况中,这是一个带有筛选器组件的产品搜索页面。因此,当我单击一个过滤器以激活它时(例如,price <= 50
),我会触发"监听"activePriceFilters
状态变量的useEffect()
。然后,该效果调用一个函数(这里是someFunction
),该函数将计算筛选列表,并使用新的筛选列表设置新的productList
状态。
片段:
function App() {
const [someState, setSomeState] = React.useState(0);
const [someTrigger, setSomeTrigger] = React.useState(false);
function someFunction() {
return someState + 1;
}
React.useEffect(() => {
const newState = someFunction();
setSomeState(newState);
},[someTrigger])
return(
<React.Fragment>
<div>I am App</div>
<div>My state: {someState}</div>
<button onClick={()=>setSomeTrigger((prevState) => !prevState)}>Click</button>
</React.Fragment>
);
}
ReactDOM.render(<App/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"/>
useEffect
,这篇文章非常棒。 - devserkan