React笔记应用添加新笔记时出现key属性重复警告排查

我正在开发一款基于API的React笔记应用，所有功能运行正常，但添加新笔记时会出现警告：

Each child in a list should have a unique "key" prop. Check the render method of Notes

我已在Notes组件的map循环中为<li>元素设置了key={id}，附上相关组件代码，想请教问题出在哪里？

Notes组件代码 #

{notes.length === 0 ? (
          <p>No notes to display</p>
        ) : (
          notes.map(({ id, title, body, created }) => (
            <li className="note" key={id}>
              <div className="details">
                <p>{title}</p>
                <span>{body}</span>
              </div>
              <div className="bottom-content">
                <span>{formatDate(created)}</span>

                <div
                  className={`settings ${showMenu && selectedNoteId === id ? "show" : ""}`}
                >
                  <AiOutlineEllipsis
                    className="icon"
                    onClick={() => toggleMenu(id)}
                  />

                  <ul className="menu">
                    <li
                      onClick={() => handleEdit({ id, title, body, created })}
                    >
                      <BiPencil />
                      Edit
                    </li>

                    <li onClick={() => toggleDeletePopup(id)}>
                      <BiTrash />
                      Delete
                    </li>
                  </ul>
                  {selectedDeleteNoteId === id && (
                    <DeletePopup
                      onCancel={handleDeleteCanceled}
                      deleteConfirmed={() => handleDeleteConfirmed(id)}
                    />
                  )}
                  {selectedEditNote && selectedEditNote.id === id && (
                    <EditNotePopup
                      note={selectedEditNote}
                      onSubmit={handleNoteUpdate}
                      onCancel={() => setSelectedEditNote(null)}
                    />
                  )}
                </div>
              </div>
            </li>
          ))
        )}

添加新笔记组件代码 #

return (
    <div className="newnote-popup">
      <div className="card">
        <header>
          <h3>Add a new note</h3>
          <FaTimes className={"x"} onClick={handleCancel} />
        </header>
        <form onSubmit={handleSubmit}>
          <div className="note-title">
            <label>Title</label>
            <input
              type="text"
              name="title"
              value={note.title}
              onChange={handleChange}
              maxLength={50}
              autoComplete="none"
            />
            <small className="character-count">{titleCount}/50 </small>
          </div>
          <div className="note-body">
            <label>Description</label>
            <textarea
              name="body"
              value={note.body}
              onChange={handleChange}
              placeholder="Your Note"
              maxLength={400}
            />
            <small className="character-count">{characterCount}/400 </small>
          </div>
          <div className="buttons">
            <button type="submit">Add Note</button>
          </div>
        </form>
      </div>
    </div>
  );

问题排查与解决方案 #

你当前给<li>设置key的写法是正确的，问题出在新添加笔记的id不唯一或无效，常见场景及修复方式如下：

1. 本地临时id与API返回id冲突 #

如果添加新笔记时，先给本地生成临时id（比如时间戳、自增数），再等待API返回真实id更新列表，可能出现临时id和已有笔记id重复，或者React已用临时id完成渲染后才替换，触发警告。

• 修复：生成临时id时确保唯一性（比如用Date.now() + Math.random()），等API返回真实id后，再替换数组中对应项的id。

2. API返回的新笔记id异常 #

检查添加接口的返回数据，确认新笔记对象包含非空且唯一的id字段。如果API返回id为空、默认值（如0）或重复值，直接导致key不唯一。

• 修复：对接后端修正接口返回，确保新笔记id合法。

3. 状态更新时机不当 #

提交表单后若立刻把临时笔记加入notes数组，此时临时对象的id可能不符合要求，React基于无效key渲染后触发警告，直到API返回真实数据才修正。

• 修复：等待API响应返回完整的新笔记数据（含合法id）后，再将其添加到notes数组中，避免临时数据提前渲染。

额外检查 #

更新notes状态前，打印数组确认新添加项的id类型（需为字符串/数字）及唯一性，排除数据格式问题。

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