获取后如何更新数据？答案

【问题标题】：How to update data after fetch?获取后如何更新数据？
【发布时间】：2019-01-31 12:10:18
【问题描述】：

我正在 fetchData 方法中获取有关 componentDidMount 的数据。之后，我尝试使用该方法删除数据。我试图在 deleteUser 方法中立即更新日期，但它不起作用。使用 delete 方法获取后如何更新这些数据？

fetchData = () => {
    let url = `https://contact-browser.herokuapp.com/contacts`;
    fetch(url, {method: 'get'}).then(resp => resp.json()).then((data) =>
        this.setState({
            data: Object.entries(data).map(([key,value])=>({key:Number(key),value}))
        })
    );
};

componentDidMount() {
    this.fetchData();
}

deleteUser = (id) => {
    let url = `https://contact-browser.herokuapp.com/contact/${id}`;
    fetch(url, {method: 'delete'}).then(resp => console.log(resp));
    this.fetchData();
};

【问题讨论】：

当您说“它不起作用”时，会发生什么而不是您希望发生什么？
删除用户，但数据不变。

标签： javascript reactjs api fetch

【解决方案1】：

在删除获取完成后重新获取您的数据，这样可以确保在服务器上完全解决删除后获取数据。

deleteUser = (id) => {
    let url = `https://contact-browser.herokuapp.com/contact/${id}`;
    fetch(url, {method: 'delete'}).then(resp => {
         this.fetchData();
    });
};

【讨论】：

【解决方案2】：

由于 JS 的异步行为，它“不起作用”。简单来说，当代码中有任何等待（如 DB 调用、API 调用等）时，JS 代码会让特定的代码运行并开始执行下一行。 More on this - https://www.hongkiat.com/blog/synchronous-asynchronous-javascript/

在这种情况下，由于 fetch 是一个 i/o 等待，因此控制将移至下一行 - this.fetchData()。因此，fetchData() 在实际发生删除之前被调用。

以下是使用 async 和 await 的另一种解决方案。 More to read

deleteUser = async (id) => {
     let url = `https://contact-browser.herokuapp.com/contact/${id}`;
     let resp = await fetch(url, {method: 'delete'});
     console.log(resp);
     this.fetchData();
};

【讨论】：

【解决方案3】：

你也可以使用 async 和 await

  deleteUser = async (id) => {
         let url = `https://contact-browser.herokuapp.com/contact/${id}`;
        const deleted = await fetch(url, {method: 'delete'}).then(resp => console.log(resp));
        if(deleted){
             await this.fetchData();
        }
   };

【讨论】：