如何在 post 请求后获取添加项目的 ID？

Question

我有一个函数接受两个输入并在反应中发出 post 请求：

addNote(title, content){
    this.setState({title: title, content: content, error: ''}, () => {
        const newNote = {
            title: this.state.title,
            content: this.state.content,
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString()
        };
        fetch('http://localhost:8000/notes', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(newNote)
        })
        .catch(error => {
            this.setState({error: 'Error adding note.'});
            console.error('Error during adding note', error);
        })
        const storedNotes = this.state.notes;
        storedNotes.unshift(newNote);
        this.setState({notes: storedNotes});
        //Adding this.fetchNotes(); here does not work
    });
}

fetchNotes(){
    fetch('http://localhost:8000/notes')
    .then(response => response.json())
    .then(data => this.setState({isLoading: false, notes: data}))
}

笔记的 ID 类似于 5b0fac246637e1005ca0a7b5（由 mongoose 提供）。如何在 react 中获取新添加的项目的 id，以便我可以在路由 /notes/:noteId 中执行其他操作，如更新和删除笔记？当我添加注释并尝试删除它时，出现 404 错误，因为 id 未定义。在页面重新加载时，操作工作正常。我不想在服务器中发出 post 请求，因为视图是由 react 呈现的。

我在添加笔记后再次尝试获取所有笔记的请求。它没有按预期工作。添加的注释不会在提交时立即显示。

我是否应该自己发起一个带有 id 的 post 请求，比如 new Date().toISOString()？

Answer 1

为什么在 POST 请求后 return 新的猫鼬 ID？

像这样：

addNote(title, content){
    this.setState({title: title, content: content, error: ''}, () => {
        const newNote = {
            title: this.state.title,
            content: this.state.content,
            createdAt: new Date().toISOString(),
            updatedAt: new Date().toISOString()
        };

        fetch('http://localhost:8000/notes', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(newNote)
        })
        .then(response => response.json())
        .then(data => {
            // here data.id might contain your objectId

            const storedNotes = this.state.notes;
            storedNotes.unshift(newNote);
            this.setState({notes: storedNotes});
            //Adding this.fetchNotes(); here does not work
        })
        .catch(error => {
            this.setState({error: 'Error adding note.'});
            console.error('Error during adding note', error);
        });
    });
}

fetchNotes(){
    fetch('http://localhost:8000/notes')
    .then(response => response.json())
    .then(data => this.setState({isLoading: false, notes: data}))
}

但这需要对服务器上的 /notes 端点进行一些重构。

如何在 post 请求后获取添加项目的 ID？

How to get the id of the added item after a post request in react?

crud

mongoose

reactjs