如何仅更新对象单个属性？React+TypeScript笔记应用报错解决

问题场景 #

开发笔记应用时，添加笔记会生成带可编辑文本区域和创建日期的组件。尝试仅更新笔记文本内容时，遇到TypeScript类型错误：

Argument of type 'string' is not assignable to parameter of type 'INote'

相关代码如下：

状态定义与更新函数 #

export const App = () => {

  const [notesList, setNotesList] = React.useState<Array<INote>>([{text: '', date: new Date()}]);

  const updateNote = React.useCallback(
    (idx: number, text: string) => {
      const newList = [...notesList];
      newList.splice(idx, 1, text); 
      setNotesList(newList);
    },
    [notesList]
  );

列表渲染代码 #

{notesList.length > 0 &&
  (filteredNotes && filteredNotes.length > 0 ? (
    filteredNotes.map((note: INote, idx: number) => (
      <>
        <Note
          onChange={updateNote}
          remove={deleteNote}
          idx={idx}
          date={note.date}
          text={note.text}
          key={idx}
        />
      </>
    ))
  ) : (
    <Text>No results found</Text>
  ))}

错误原因 #

newList.splice(idx, 1, text) 这行代码错误地用字符串text替换了数组中原本的INote类型对象，导致数组元素类型不符合定义，触发TypeScript报错。

修复方案 #

修改updateNote函数，保留原笔记的date属性，仅更新text字段，确保数组元素始终是INote类型：

const updateNote = React.useCallback(
  (idx: number, text: string) => {
    const newList = [...notesList];
    // 复制原笔记对象，仅更新text属性，保持date不变
    newList[idx] = { ...newList[idx], text };
    setNotesList(newList);
  },
  [notesList]
);

说明 #

• 使用对象扩展运算符创建新的笔记对象，避免直接修改原状态，符合React状态不可变的设计原则。
• 新对象完整保留原笔记的date属性，仅替换text值，严格匹配INote接口的类型要求，彻底解决类型错误。
• 直接修改数组索引的方式比splice更直观，也更符合React状态更新的最佳实践。

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