更新状态后反应 onChange 不返回更新的值[重复]答案

【问题标题】：React onChange doesn't return updated value after updating the state [duplicate]更新状态后反应 onChange 不返回更新的值[重复]
【发布时间】：2022-01-17 21:29:42
【问题描述】：

我正在努力实现类似的目标，

每当用户更改任何输入字段值时，正常更新状态值并执行一些操作，例如提交具有更新状态值的表单。

我正在做

    const [data, setData] = useState({
        search: '',
        field: '',
        direction: '',
    })

    const onHandleChange = (e) => {
        setData({
            ...data,
            [e.target.name]: e.target.value,
        })

        // Do soemthing with the updated data, for now I'll just console.log
        console.log(data);
    }

<input type="search" name="search" onChange={onHandleChange} value={data.search} />

如屏幕截图所示，如果我输入123，最新的控制台日志将是12 它总是落后 1 步：/

我想到使用useEffect()的一件事

但useEffect 也运行第一个渲染，这是我不想要的。我不希望表单在第一次渲染时提交，但只有在用户更改任何内容时才提交。

【问题讨论】：

这能回答你的问题吗？ onChange in React doesn't capture the last character of text
@AmmarOker 不，因为他们没有使用useState 挂钩，我尝试将回调函数作为第二个参数，但它不起作用。
TL;DR React 状态更新是异步处理的，使用依赖于状态更新的useEffect 钩子来处理更新状态的副作用。有一些常见的模式可以在初始渲染时跳过 useEffect 回调。无论如何，您应该只在需要时才提交表单，所以它应该已经在某种条件逻辑之下/之后，对吧？

标签： reactjs react-hooks use-state

【解决方案1】：

您需要注意 useEffect 中的数据，因为 setstate 是异步操作，不会立即反映结果，

useEffect(()=>{
// required action here
},[data]) // watch changes here

【讨论】：

OP 已经提到useEffect 以及他/她不想使用useEffect 的原因，请改进您的答案。
仅在第一次渲染时使用“useEffect”并不是了解如何使用它的正确方法。我已经在此基础上进行了更新。接下来，状态更新是异步的，也是被忽略的基本事情。如果你已经清除了这些东西，你可以在任何地方用基本的 js 知识调用你的操作。
@AniketDas 即使是这里回答的原始问题也有相同的回答者。 SO 不是在这里为您提供所有问题的现成答案。用它来明确事实/概念。

【解决方案2】：

正如 Sanket Shas 所说，“React 不保证立即应用状态更改”。

所以，如果你不想使用 useEffect，可以试试这样的：

 const [data, setData] = useState({
    search: "",
    field: "",
    direction: "",
  });

  const onHandleChange = (e) => {
    let dataUpdated = {
      ...data,
      [e.target.name]: e.target.value,
    };
    setData(dataUpdated);

    // Do soemthing with the updated data, for now I'll just console.log
    console.log(dataUpdated);
  };

<input type="search" name="search" onChange={onHandleChange} value={data.search} />

【讨论】：