React：如果第二个依赖于第一个，如何调用 setState 两次？答案

【问题标题】：How to call setState twice if the second relies on the first?React：如果第二个依赖于第一个，如何调用 setState 两次？
【发布时间】：2022-01-11 11:19:43
【问题描述】：

如果第二个 setState 钩子依赖于你的第一个钩子首先更改，我如何在反应中实现这个简单的逻辑？在此示例中，第一个 setState 值在运行第二个 setState 之前更新得不够快。我曾尝试将第二个置于超时状态，并将其置于第一个的回调函数中。没有成功。 useEffect 可能会解决此问题，但在此特定情况下，我只需要在第一个而不是每次状态更改时调用 useEffect。让我知道你的想法。

function blah(arg) {
    if (condition) {
        setState(arg)
    }
    setState(state + 1)
}

【问题讨论】：

为什么需要这样做？当实际问题可以通过不同方式解决时，您可能正在寻找解决方案
@evolutionxbox 同意，你可以说出你的实际问题。
这两种变化是作为生命周期事件的一部分还是作为 DOM 事件处理程序的一部分发生的？如果是这样，两个更改将一起批处理。
问题很简单，我如何在反应中实现这个简单的逻辑（以我直观地希望它工作的方式，因为这个逻辑不起作用）所以任何实现这一点的解决方案都会很棒
“这个简单的逻辑”是什么让你觉得它很简单？

标签： javascript reactjs react-hooks

【解决方案1】：

React 的 State 并不是作为变量工作的。当您调用setState 时，您只是告诉代码它应该在组件的下一次渲染中使用什么值。它永远不会立即设置值。

如果您需要它充当变量，只需使用变量并在最后调用一次setState。

function blah(arg) {
    let aux = state;
    if (condition) {
        aux = arg;
    }
    setState(aux + 1);
}

【讨论】：

谢谢你说得通

【解决方案2】：

你需要使用 useEffect 钩子：

const [state, setState] = useState();

useEffect(() => {
    // get executed  whenever state is changed
}, [state])


function blah(arg) {
    if (condition) {
        setState(arg)
    }
}

【讨论】：

但我也在改变其他地方的状态，我不想调用 useEffect，只在这个特定的情况下
如果这样你可以使用 setTimeout 延迟第二个 setState

【解决方案3】：

首先加载函数

import React, { useState, useEffect } from 'react';

然后

const [ListValue, setListValue] = useState([]);
  
useEffect(() => {
    console.log(ListValue)
}, [])


function blah(arg) {
    if (condition) {
        setListValue(arg)
    }
}

【讨论】：