Question

我正在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();
};

Answer 1

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

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

Answer 2

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

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

以下是使用异步和等待的另一种解决方案。 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();
};

Answer 3

您还可以使用异步并等待

.nav a { 
  color: #000; 
  padding-bottom: 20px; 
  display: inline-block;
}
.nav ul {
    list-style: none;
    padding: 0px; 
  margin: 0;
}

提取后如何更新数据？

3 个答案: