等待父状态更新，然后再调用另一个函数

Question

我正在调用一个需要做两件事的函数：

1. 调用父级函数使用获取请求更新我的数据库，然后更新我的父级状态
2. 等待第一个函数更新我的状态，然后路由到可以查看我更新数据的视图（使用道具）

问题是我不确定继续前进到第二个功能之前如何等待第一个功能完成。因此，当我尝试使用第二个功能更改视图时，显示的数据不会更新。

我要运行并更新状态的父级函数。

updateEntry = (newHeader, newBody, index) => {
    fetch("http://localhost:3000/update", {
    method: 'PUT',
    body: JSON.stringify({
        header: newHeader,
        body: newBody,
        index: index
    }),
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})
  .then(response => response.json())
  .then(data => { this.setState({journalDb: data })})
}

子级函数，我使用 updateEntry（）

调用父级函数

initiateUpdate = (e) => {
    e.preventDefault();
    this.props.updateEntry(value1, value2, value3)
    this.props.setEditMode();
}

问题是我的父级状态没有及时更新，以显示当我使用 setEditMode（）更改路线时...我不确定如何等待父级状态在运行此

之前进行更新

Answer 1

所以您可以做的就是这样

updateEntry = (newHeader, newBody, index) => {
    return new Promise((resolve) =>fetch("http://localhost:3000/update", {
        method: 'PUT',
        body: JSON.stringify({
            header: newHeader,
            body: newBody,
            index: index
        }),
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => { 
        this.setState({journalDb: data })
        resolve()
    })
})

，只需添加

initiateUpdate = (e) => {
    e.preventDefault();
    this.props.updateEntry(value1, value2, value3)
         .then(() => this.props.setEditMode());
}

这样，您可以确保在调用setEditMode时updateEntry已完成

Answer 2

只需更改您的updateEntry函数以返回获取的结果，因为这是一个承诺。例如：

updateEntry = (newHeader, newBody, index) => fetch("http://localhost:3000/update", {

然后，当您调用父函数时，将其视为一个承诺：

this.props.updateEntry(value1, value2, value3).then(() => {
  this.props.setEditMode()
})