React中POST请求后如何获取新增项的ID？

解决方案 #

核心问题分析 #

你现在的代码有两个关键问题：

• 提前更新本地state：你在发送POST请求后，直接把自己生成的newNote（没有后端生成的ID）加到了state里，这就导致后续操作时这个笔记对象没有正确的_id/id字段，自然会出现404错误。
• POST请求未等待响应就操作：你没有处理POST请求的成功响应，既没拿到后端返回的带ID的笔记，也没确保POST请求完成后再更新state或调用fetchNotes——哪怕你调用了fetchNotes，也可能因为POST请求还没完成写入数据库，导致GET请求拿不到新数据。

不建议自行生成ID #

完全没必要自己生成ID，Mongoose的ObjectId是经过设计的（包含时间戳、机器标识等信息），自行生成不仅可能和后端的ID生成逻辑冲突，还会增加不必要的复杂度。后端在处理POST请求后，应该会把包含自动生成ID的新笔记对象返回给前端，这才是正确的获取方式。

修正后的代码示例 #

修改addNote函数，等待POST请求成功后，拿到后端返回的带ID的笔记，再更新本地state：

addNote(title, content){ 
  this.setState({title: title, content: content, error: ''}, async () => { 
    const newNote = { 
      title: this.state.title, 
      content: this.state.content, 
      createdAt: new Date().toISOString(), 
      updatedAt: new Date().toISOString() 
    }; 
    try {
      const response = await fetch('http://localhost:8000/notes', { 
        method: 'POST', 
        headers: { 
          'Accept': 'application/json', 
          'Content-Type': 'application/json', 
        }, 
        body: JSON.stringify(newNote) 
      });
      
      if (!response.ok) {
        throw new Error('Failed to add note');
      }

      // 拿到后端返回的带ID的新笔记
      const savedNote = await response.json();
      
      // 更新state，用带ID的笔记对象，而不是本地生成的
      this.setState(prevState => ({
        notes: [savedNote, ...prevState.notes],
        error: ''
      }));
    } catch (error) {
      this.setState({error: 'Error adding note.'}); 
      console.error('Error during adding note', error); 
    }
  }); 
}

为什么这样能解决问题 #

1. 等待POST响应：使用async/await确保POST请求完成并拿到后端返回的带ID笔记，再更新state，这样state里的笔记对象就有了正确的ID，后续删除、更新操作不会再出现404。
2. 正确更新state：通过prevState来更新notes数组，避免直接修改原数组（React state是不可变的，直接修改storedNotes.unshift其实是不规范的写法）。
3. 无需额外调用fetchNotes：因为已经从POST响应拿到了最新的笔记，直接加到state里即可，不需要再发起GET请求拉取全部数据，既提升性能也避免了时序问题。

如果你的后端目前没有返回新创建的笔记对象，那需要稍微调整后端的POST接口，在创建文档后把该文档返回（Mongoose的save()方法会返回创建后的文档，直接res.send出去就行）。

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