почему мне нужно обновить sh страницу, чтобы получить новое состояние В реакции Express

Question

У меня есть эта функция, чтобы добавить комментарий в базу данных и затем отобразить новые комментарии на странице. В 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 });
            });
    })
});

, и это функция извлечения данных из express server, которая связана после предыдущего вызова fetch():

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);
            });
    })
});

У меня другие функции ведут себя так же, мне нужно обновить страницу sh, чтобы получить новое состояние.

что я сделал не так ??

Answer 1

Обработчик успеха для вашего обещания axios является вызовом функции, поэтому он будет вызван немедленно, а возвращаемое значение будет использовано в качестве обработчика. Такое изменение блока должно дать ожидаемый результат

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));