React中获取多输入框值到对象时仅保留最后输入值的问题

问题原因 #

你当前的代码每次更新dataItem时，都是创建一个全新的空对象，只存入当前修改的输入框的索引和值，然后直接替换掉原有的dataItem。这就导致之前输入的所有数据都被覆盖了，最终只能保留最后一次修改的那一项。

解决方案 #

更新state时，需要保留原有对象的所有数据，再合并新修改的键值对。推荐使用React的函数式更新方式，这种方式能确保你拿到最新的state状态，避免异步更新带来的问题：

修改getMultipleInputValue函数：

function getMultipleInputValue(index, e) {
  // 函数式更新，prev是最新的dataItem状态
  setDataItem(prev => ({
    ...prev, // 展开原有对象，保留所有已存数据
    [index]: e.target.value // 添加/更新当前输入框的值
  }))
}

如果你习惯先复制原有对象再修改，也可以这么写（但函数式更新更稳妥）：

function getMultipleInputValue(index, e) {
  let newObj = {...dataItem}; // 复制原有对象
  newObj[index] = e.target.value; // 修改当前项
  setDataItem(newObj);
}

修改后完整代码 #

function App() {
  const [dataItem, setDataItem] = useState({});
  let arr = [1, 2, 3, 4, 5];
  
  function getMultipleInputValue(index, e) {
    setDataItem(prev => ({
      ...prev,
      [index]: e.target.value
    }))
  }

  function getDtat() {
    console.log("dataItem", dataItem)
  }

  return (
    <>
      {arr.map((data, index) => {
        return (
          <input type='text' name={index} key={data} onChange={(e) => 
          getMultipleInputValue(index, e)} />
        )
      })}
      <button onClick={() => getDtat()}>Click here</button>
    </>
  );
}

export default App;

现在点击按钮，就能看到dataItem里保存了所有输入框的索引和对应值。

内容的提问来源于stack exchange，提问作者devReact