效果总是在渲染阶段完成后执行，即使你在一个效果内设置了状态，另一个效果将读取更新的状态并在渲染阶段后对其采取行动。

话虽如此，采取这两种行动可能会产生相同的效果，除非有可能b会因为改变a以外的原因而改变，在这种情况下，你也会想要执行相同的逻辑

效果总是在渲染阶段完成后执行，即使你在一个效果内设置了状态，另一个效果将读取更新的状态并在渲染阶段后对其采取行动。

话虽如此，采取这两种行动可能会产生相同的效果，除非有可能b会因为改变a以外的原因而改变，在这种情况下，你也会想要执行相同的逻辑

为了将来的目的，这可能也有帮助:

在useEffect中使用setState是可以的，你只需要注意不要创建一个循环。

但这并不是可能发生的唯一问题。见下文:

假设您有一个组件Comp，它从父组件接收props，并且根据props的变化您想要设置Comp的状态。出于某种原因，你需要在不同的useEffect中更改每个道具:

不要这样做

useEffect(() => {
  setState({ ...state, a: props.a });
}, [props.a]);

useEffect(() => {
  setState({ ...state, b: props.b });
}, [props.b]);

它可能永远不会改变a的状态，正如你在这个例子中看到的: https://codesandbox.io/s/confident-lederberg-dtx7w

在本例中发生这种情况的原因是，当您更改两个道具时，两个useEffects运行在相同的react周期中。A和道具。B所以{…setState}在两个useEffect中是完全相同的，因为它们在同一个上下文中。当你运行第二个setState时，它将取代第一个setState。

而是这样做

这个问题的解决方案基本上是像这样调用setState:

useEffect(() => {
  setState(state => ({ ...state, a: props.a }));
}, [props.a]);

useEffect(() => {
  setState(state => ({ ...state, b: props.b }));
}, [props.b]);

在这里查看解决方案:https://codesandbox.io/s/mutable-surf-nynlx

现在，当您继续执行setState时，您总是会收到最新和正确的状态值。

一般来说，在useEffect中使用setState将创建一个无限循环，而这很可能是您不想引起的。这个规则有几个例外，我稍后会讲到。

每次渲染后都会调用useEffect，当setState在其中使用时，它会导致组件重新渲染，从而调用useEffect，等等。

在useEffect中使用useState不会导致无限循环的常见情况之一是，将一个空数组作为第二个参数传递给useEffect，如useEffect(() => {....}，[])，这意味着效果函数应该被调用一次:只在第一次挂载/渲染之后。当您在组件中进行数据获取并且希望将请求数据保存在组件的状态时，这种方法被广泛使用。

尝试将setState包装在if语句中，检查状态是否需要更改-如果是，则更改它，否则返回()=> {}

例如,

useEffect(() => {
    if(a.currentCondition !== a.desiredCondition) {
        setA();
    }
    return cleanup;
}, [b])

useEffect可以钩住某个道具或状态。所以，为了避免无限循环钩子，你需要做的事情是绑定一些变量或状态到效果

例如:

useEffect(myeffectCallback, [])

上述效果只会在组件渲染后触发。这类似于componentDidMount生命周期

const [something, setSomething] = withState(0)
const [myState, setMyState] = withState(0)
useEffect(() => {
  setSomething(0)
}, myState)

上面的效果只会触发我的状态已经改变，这与componentDidUpdate类似，只是不是每个改变的状态都会触发它。

你可以通过这个链接阅读更多细节