Javascript setState延迟更新组件一个状态

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

国家落后了一步

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);
}

---

首先，该代码看起来有点不正确： 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);

import React，{useState}来自“React”；
从“react dom”导入react dom；
导入“/styles.css”；
常量应用=（）=>{
const[name，setName]=useState（“”）；
const[reg，setReg]=useState（[“狗”、“猫”、“猴”）；
const[pujab，setPujab]=useState（“”）；
返回(
名字：
{
const newFirstName=e.target.value；
setName（newFirstName）；
}}
/>
更改列表：
{
const newPujab=e.target.value；
塞普贾布（新普贾布）；
控制台日志（“INITIT”）；
for（设i=0；i
动物列表：{reg.map（item=>item+“”）}

更改：{name}

姓名：{pujab}

);
};
const rootElement=document.getElementById（“根”）；
ReactDOM.render（
很难判断整个脚本的不足1/3…能否将整个组件包含在代码段中？setState实际上是一个异步操作。因此，如果您试图在setState操作之后访问更新的状态，则可能会遇到问题。如果需要执行任何此类操作，请使用setState whi的第二个参数ch接收一个回调，该回调只有在状态成功更新后才能执行。使用codepen…@ChrisChen我更新了一点。@AnuradhaKumari我知道，但我有一个组件（比如一个文本框）这需要在我更改其中的某些内容后立即更新。因此，此函数对于组件来说是一种一次性更改。我不能在状态更新时延迟渲染它。我必须在用户更改文本框中的文本时才渲染它（文本框是一个示例，而不是实际的组件）