React useState报错TypeError:尝试给只读属性赋值，修改状态中文件name属性失败

问题根源 #

1. 状态直接突变
   你虽然通过[...images]创建了新的数组实例，但数组内存储的image对象仍然是原state中对象的引用，直接执行image.name = editingText相当于直接修改了state里的原始数据，违反了React状态不可变的核心原则，是引发报错的主要原因。
2. async/await滥用
   Array.map是同步方法，返回值为普通数组而非Promise，此处使用await完全多余，反而可能引发意外的执行时序问题。

修复方案 #

直接修改你的handleNewTitle函数，匹配目标id时返回新的对象实例，避免修改原对象：

const handleNewTitle = (id) => {
  try {
    const updatedTitles = images.map((image) => {
      if (image.id === id) {
        // 返回新对象，不修改原引用
        return {
          ...image,
          name: editingText
        }
      }
      return image;
    });
    setImages(updatedTitles);
    setUploadImages(updatedTitles);
    // 可选补充：提交成功后重置编辑状态
    setTitleEditing(null);
    setEditingText('');
  } catch (err) {
    console.warn(err);
  }
};

补充说明 #

如果状态存放在父组件，需确认setImages、setUploadImages是父组件传递的正确修改方法，不存在引用丢失或者绑定错误的问题。

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