React受控组件文本输入框onChange不生效 输入变更无法同步展示

• 核心问题是直接修改原状态引用且未返回新的数组引用：React 状态更新时会对 state 做浅比较，你在 setList 回调中直接修改了原数组 old 内部的对象属性，之后仍然返回原数组本身，React 检测到数组引用没有变化，就会跳过组件重渲染，因此视图不会同步更新，这和你设置的 key 属性没有关系。
• 次要问题：初始化的 list 数组中两个元素的 id 重复为 1，如果你后续需要用 id 作为列表渲染的 key 会出现冲突，不过这不是本次问题的直接诱因。

修改 setText 方法中的状态更新逻辑，基于原数组拷贝得到新数组后再修改值，返回新数组触发重渲染即可，示例代码如下：

const setText = (e, index) => {
  setList((old) => {
    // 拷贝得到新的数组引用
    const newList = [...old];
    // 拷贝对应下标的对象，避免直接修改原状态对象
    newList[index] = { ...newList[index], text: e.target.value };
    return newList;
  });
};

如果后续列表有增删操作，建议给每个元素设置唯一 id 后用 id 作为 key，避免 index 作为 key 带来的渲染异常问题，调整示例如下：

// 初始化时设置唯一id
const [list, setList] = useState([
  { id: 1, text: "abc" },
  { id: 2, text: "zxy" }
]);

// 渲染时用id作为key
{list.map((li, index) => (
  <input
    key={li.id}
    value={li.text}
    onChange={(e) => setText(e, index)}
  />
))}

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