为什么我需要刷新页面以获得新状态在 React Express 中

Question

我有这个功能可以将评论添加到数据库，然后在页面上呈现新评论 In REACT :

addComment(event) {
    event.preventDefault();
    console.log(this.state);

    axios
        /* the function of posting the comment first */
        .post('/api/comment/' + this.state.project._id ,{inputComment: this.state.inputComment})
        /* then the function of retriveng the data */
        .then(
            fetch('/api/p/' + this.state.project._id).then(res => res.json())
                .then((project) => {
                    console.log(project)
                    this.setState({ project })
                    this.setState({ inputComment: '' })
                })
        )
        .catch(err => console.log(err))
}

问题是我得到的是添加最后一条评论之前的状态。

如果我检查控制台，获取和检索评论的功能在添加评论和更新数据库的功能之前完成，尽管我将它们链接在 then() 中。

这是在express server上发表评论的功能，首先被axios.post()调用：

app.post('/api/comment/:project_id', (req, res) => {
    console.log(req.body)

    mongo.connect(process.env.CONNECTION_STRING, (err, dbo) => {
        if (err) console.log('Database error: ' + err);

        let db = dbo.db('portfolio');
        let coll = db.collection('projects');
        let project_id = req.params.project_id;

        let comment = req.body.inputComment;
        db.collection('projects')
            .findOneAndUpdate({ _id: ObjectId(project_id) }, { $push: { comments: comment }  })
            .then((data) => {
                res.json({ code: 1 });
            });
    })
});

这是通过调用 fetch():

从 express server 中检索数据的函数，该数据链接在前一个数据之后

app.get('/api/p/:project_id', (req, res) => {
    mongo.connect(process.env.CONNECTION_STRING, (err, dbo) => {
        if (err) console.log('Database error: ' + err);

        let db = dbo.db('portfolio');
        let coll = db.collection('projects');
        let pproject_id = req.params.project_id;

        db.collection('projects')
            .findOne({ _id: ObjectId(pproject_id) })
            .then((data) => {
                res.json(data);
            });
    })
});

我有其他功能表现相同，我需要刷新页面以获取新状态。

我做错了什么？？

Answer 1

您的 axios promise 的成功处理程序是一个函数调用，因此它将被立即调用并且 return 值将用作处理程序。像这样更改块应该会给出预期的结果

axios
  /* the function of posting the comment first */
  .post("/api/comment/" + this.state.project._id, {
    inputComment: this.state.inputComment
  })
  /* then the function of retriveng the data */
  .then(response =>
    fetch("/api/p/" + this.state.project._id)
      .then(res => res.json())
      .then(project => {
        console.log(project);
        this.setState({ project });
        this.setState({ inputComment: "" });
      })
  )
  .catch(err => console.log(err));

为什么我需要刷新页面以获得新状态在 React Express 中

why I need to refresh the page to get the new state In react Express

asynchronous

node.js

express

reactjs

es6-promise