React中如何通过input的onChange更新数组状态并实时显示

你直接修改了React状态中的原数组，React检测状态更新依赖引用变化。当执行array[index] = e.target.value时，只是修改了原数组的元素，但数组本身的引用没有改变，React会认为状态未更新，不会触发组件重渲染，导致input的值无法实时同步。

必须创建原数组的副本，修改副本后再通过setArray更新状态，让React能检测到引用变化。以下是两种常用实现方式：

方式1：用展开运算符创建数组副本 #

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [array, setArray] = useState(["1", "2", "3"]);
  return (
    <div className="App">
      {array.map((item, index) => (
        <input
          key={index}
          type="text"
          value={item}
          onInput={(e) => {
            setArray((prevArray) => {
              // 生成原数组的浅拷贝
              const newArray = [...prevArray];
              // 修改拷贝后的数组元素
              newArray[index] = e.target.value;
              return newArray;
            });
          }}
        />
      ))}
    </div>
  );
}

方式2：用map生成新数组（更简洁） #

通过遍历原数组，只修改目标索引对应的元素，直接生成新数组：

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [array, setArray] = useState(["1", "2", "3"]);
  return (
    <div className="App">
      {array.map((item, index) => (
        <input
          key={index}
          type="text"
          value={item}
          onInput={(e) => {
            setArray((prevArray) => 
              prevArray.map((val, idx) => 
                idx === index ? e.target.value : val
              )
            );
          }}
        />
      ))}
    </div>
  );
}

• 给每个input添加key属性：React列表渲染需要唯一key来追踪元素变化，这里用index是临时方案，如果后续数组有排序、增删操作，建议使用元素的唯一标识作为key。
• 直接用item作为input的value：比array[index]更简洁，逻辑也更清晰。

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