在 React.js 的功能組件體中直接調用 function

Question

我有一個功能組件，一些 function 直接在正文中調用（即 function 更改了 state && 它需要在每個渲染中運行）。 100% 沒問題，還是會導致錯誤？

const myFunc = (setMyState, ...) => {
    ...
    setMyState(...)
}

const MyComponent = () => {
    const [myState, setMyState] = useState(...)
    myFunc(setMyState, ...)
    return(<div>some content...</div>)
}

Answer 1

這將導致無限循環。 這就是為什么：

1. 組件第一次渲染
2. function 更新組件 state
3. 由於 state 更新，組件呈現
4. function 再次運行並再次更新組件
5. ETC

您絕對可以通過在 function 中使用 if 語句來避免這種情況，但是更新組件 state 的最佳方法是通過用戶輸入/api調用或道具更新（我想你的情況）

在我看來，最好的方法是使用useEffect 鈎子