我应该在哪里声明在useEffect（）挂钩内调用的函数？

Question

因此，当使用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])

问题：

在这种情况下，我应该在useEffect()内声明someFunction还是将其保留在外部（但在组件体内）是安全的？

我可以将其添加到dependency数组中，但这会损害代码的可重复性，因为我想专注于trigger 。

由于useEffect()将在新的渲染之后运行， 因此可以安全地假设它具有我在其中调用的函数的新副本吗？

是否存在基本规则，即何时应该在useEffect挂钩中声明函数，或者何时必须将其添加到依赖项数组中？

编辑：请注意， useEffect必须具有这些函数的新副本，因为这些函数需要访问一些最新的state变量。

注意：

此代码在CodeSandbox上触发以下eslint警告 。 虽然效果很好。

React Hook React.useEffect缺少依赖项：“ someFunction”。 包括它或删除依赖项数组。 （反应钩/穷举）

实际情况：

这是一个简化的示例。 实际上，这是一个包含过滤器组件的产品搜索页面。 所以，当我在过滤器上点击来激活它（比方说， price <= 50 ），我触发useEffect()是“听”为activePriceFilters状态变量。 那么效果将调用的函数（ someFunction中的例子），将计算的filteredList ，将设置新的productList状态与新filteredList 。

SNIPPET

 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"/> 

Answer 1

设置其他状态根本不起作用。

 const [someState, setSomeState] = React.useState(0);

 function increaseState() {
    setSomeState(someState + 1);
 }

Answer 2

在useEffect之内或之外定义函数的决定取决于在何处调用所有函数。

如果仅在useEffect中调用函数，则在useEffect中定义它是有意义的。

但是，是从useEffect以及其他事件处理程序或其他效果中调用相同的函数，您需要在useEffect之外定义它

PS。 在您的情况下，您只是在更新不需要定义单独功能的状态

 function App() { const [someState, setSomeState] = React.useState(0); const [someTrigger, setSomeTrigger] = React.useState(false); React.useEffect(() => { setSomeState(oldState => oldState + 1); },[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(() => {
    const calcVal = (oldState) => {
         // calculate previous state based on oldState
    }

    setSomeState(calcVal);
}, [activePriceFilters])