setState 延迟更新组件一个状态答案

【问题标题】：setState updates component one state latesetState 延迟更新组件一个状态
【发布时间】：2019-09-21 06:37:24
【问题描述】：

在下面的代码中，名称（或任何其他对象/不仅仅是字符串）仅在第二次更改后在组件中更新。在第三次更改中，它获取第二次更改值，依此类推，即状态落后一步。

状态落后了一步

const [state,setState]=useState([]);

const onChange=(id)={
let vname="hello world";
const temp = state.map((item,i)=>{
if(i===id){
return vname;
}
return item;
});
setState(temp);
}

【问题讨论】：

很难用不到 1/3 的整个脚本来判断...您能否将整个组件包含在您的 sn-p 中？
setState 实际上是一个异步操作。因此，如果您在 setState 操作之后尝试访问更新的状态，您可能会遇到问题。如果您需要执行任何此类操作，请使用 setState 的第二个参数，该参数接受一个回调，该回调仅在状态更新成功后才会执行。
使用codepen.....
@ChrisChen 我更新了一点。
@AnuradhaKumari 我知道，但我有一个组件（比如一个文本框）需要在我更改其中的某些内容后立即更新。所以这个函数有点像组件的 onChange 。当状态更新时，我不能延迟渲染它。我只有在用户更改文本框中的文本时才渲染它（文本框是一个示例，而不是实际组件）

标签： javascript reactjs setstate

【解决方案1】：

首先，该代码看起来有点不正确： onChange 事件应该将事件解析为它。

试试这样的：

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const App = () => {
  const [name, setName] = useState("");
  const [reg, setReg] = useState(["dog", "cat", "monkey"]);
  const [pujab, setPujab] = useState("");
  return (
    <div>
      <label htmlFor="name">firstName:</label>
      <input
        name="name"
        type="text"
        value={name}
        onChange={e => {
          const newFirstName = e.target.value;
          setName(newFirstName);
        }}
      />

      <div />

      <label htmlFor="play">ChangeList: </label>
      <input
        name="play"
        type="text"
        value={pujab}
        onChange={e => {
          const newPujab = e.target.value;
          setPujab(newPujab);
          console.log("iniitiitit");
          for (let i = 0; i < reg.length; i++) {
            if (reg[i] === e.target.value) {
              console.log("yessss");
              reg[i] = "welcome";
            }
          }
        }}
      />
      <p>Animal List: {reg.map(item => item + " ")}</p>
      <p>Changes: {name}</p>
      <p>Names: {pujab}</p>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我在这里的代码沙箱上有它：https://codesandbox.io/s/amazing-hodgkin-7x9nn

【讨论】：