在 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 钩子