Question

我正在使用表输入字段来更新地图功能下的状态，以根据状态中的元素数量呈现它。但是当我使用 value={item.account} 时，值不会更新state.which 当我使用 **value={accountCounter.account} 时工作正常，其中 accountCounter 是 reactjs 类型的钩子

const[accountCounter,setAccountCounter]=useState([
          { id: 1, account:"" ,accountOwner:""},
          { id: 2, account: "hi",accountOwner:"" },
          { id: 3, account: "bu" ,accountOwner:""}

这是我的渲染函数

 accountCounter.map((item,key)=>{
  return(
    <tr key={key}>
    <td><input  type="text" value={item.account}
    name="account" onChange={(e)=>handleAccountCounter(e,item)}/></td>
    <td><input  type="text" value={item.accountOwner}
    name="accountName" onChange={(e)=>handleAccountCounter(e,item)}/></td>
    <td><span onClick={()=>deleteAccount(item.id)}>X</span></td>
    </tr>   
     )
  })}

这是我的 handleAccountCounter

const  handleAccountCounter=(event,counter)=>{
 const index = accountCounter.indexOf(counter);
 accountCounter[index][event.target.name]=event.target.value;
 setAccountCounter(accountCounter)
  }

但是在输入字段value={item.account}时状态没有被修改。不知道为什么..你能帮我吗

Answer 1

代替这个

const  handleAccountCounter = (event,counter) => {
     const index = accountCounter.indexOf(counter);
     accountCounter[index][event.target.name]=event.target.value;
     setAccountCounter(accountCounter)
}

这样做

const  handleAccountCounter = (event, counter) => {
     let temp = [...accountCounter] // Make a copy of state and then perform operations
     const index = temp.indexOf(counter);
     temp[index][event.target.name] = event.target.value;
     setAccountCounter(temp)
}

Answer 2

使用 Kartikey 的答案，但您应该使用回调，因为状态更新是异步的：

const handleAccountCounter = (event, counter) => {
  setAccountCounter((prev) => {
    let newCounter = [...prev];
    newCounter[prev.indexOf(counter)][event.target.name] = event.target.value;
    return newCounter;
  });
};

这确保状态以正确的顺序更新。请参阅此处了解更多信息： https://dmitripavlutin.com/how-react-updates-state/

Answer 3

使用之前的状态值创建一个新数组：

const App = () => {
  const [accountCounter, setAccountCounter] = useState([
    { id: 1, account: "", accountOwner: "" },
    { id: 2, account: "hi", accountOwner: "" },
    { id: 3, account: "bu", accountOwner: "" }
  ]);

  const handleAccountCounter = (event, counter) => {
    setAccountCounter((prevAccountCounter) => {
      const newCounter = [...prevAccountCounter];
      newCounter[prevAccountCounter.indexOf(counter)][event.target.name] =
        event.target.value;
      return newCounter;
    });
  };

  const deleteAccount = (id) => {
    setAccountCounter((prevAccountCount) =>
      prevAccountCount.filter((item) => item.id !== id)
    );
  };

  return accountCounter.map((item, index) => (
    <tr key={index}>
      <td>
        <input
          type="text"
          value={item.account}
          name="account"
          onChange={(e) => handleAccountCounter(e, item)}
        />
      </td>
      <td>
        <input
          type="text"
          value={item.accountOwner}
          name="accountOwner"
          onChange={(e) => handleAccountCounter(e, item)}
        />
      </td>
      <td>
        <span onClick={() => deleteAccount(item.id)}>X</span>
      </td>
    </tr>
  ));
};

无法在 reactsJs 中更新状态

3 个答案: