javascript - 无法更新 React Js 中的状态

Question

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

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