我應該在哪里聲明在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])