如何处理钩子中的嵌套useState，就像基于反应的组件中的嵌套setState一样？答案

【问题标题】：How to handle nested useState in hooks just like the nested setState in component based in react?如何处理钩子中的嵌套useState，就像基于反应的组件中的嵌套setState一样？
【发布时间】：2021-04-28 20:03:18
【问题描述】：

我正在使用钩子将 React 应用程序从组件迁移到功能。我面临的问题是我们有一个使用回调的嵌套 setState 。 useState 没有这个功能。我知道我可以使用 useEffect 但有些函数会触发不同的函数，具体取决于谁触发了单个状态的更改，如下所示。这些可以使用 setState 的回调来隔离，但我想知道如何使用钩子进行转换。我唯一想到的是嵌套一个useEffect，根据文档这是一个坏主意，你不应该循环/嵌套钩子。

setState({
   state1: "",
   state2: "",
}, () => {
    setState({
       state3: ""
    }, () => {
       function 1
    })
})

setState({
   state1: "",
   state2: "",
}, () => {
    setState({
       state3: ""
    }, () => {
       function 2
    })
})

【问题讨论】：

为什么你有一个嵌套的setState？为什么不在同一个调用中同时改变两个状态呢？这样你只需要一个useEffect，状态改变后的最后一个。

标签： javascript reactjs react-redux react-hooks

【解决方案1】：

你可能可以这样做，我不确定这是否是最好的方法

useEffect(() => {
  setState1;
  setState2
}, [])

useEffect(() => {
// you will need some logic here to prevent inital run
// like say if state1 and state2 is at inital state, don't set state3
  setState3;
}, [state1, state2])

useEffect(() => {
// same idea, you will need logic from state3 to prevent inital run
  func1
}, [state3])

【讨论】：