javascript - How to update data after fetch? - Stack Overflow

admin管理员组

文章数量:1333450

I'm fetching data on ponentDidMount in fetchData method. After that I'm trying to delete data with the method. I was trying to update date immediately in deleteUser method, but it doesn't work. How can I update this data after fetch with delete method?

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

ponentDidMount() {
    this.fetchData();
}

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

I'm fetching data on ponentDidMount in fetchData method. After that I'm trying to delete data with the method. I was trying to update date immediately in deleteUser method, but it doesn't work. How can I update this data after fetch with delete method?

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

ponentDidMount() {
    this.fetchData();
}

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

• javascript
• reactjs
• fetch-api

Share Improve this question Follow edited Nov 5, 2023 at 22:56 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jan 31, 2019 at 12:10 JohnJohn 311 silver badge22 bronze badges 2

• 1 When you say 'it didn't work', what does happens as opposed to what would you like to happen? – Predrag Beocanin Commented Jan 31, 2019 at 12:12
• It deletes user, but data is the same. – John Commented Jan 31, 2019 at 12:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Refetch your data after the delete fetch has fulfilled, this ensures that the data is fetched after the delete has fully resolved on the server.

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

It "did not work" because of the async behaviour of JS. To be simple, when there is any waits in the code (like DB Call, API Call, etc), the JS code lets that particular to run and starts executing the next line. More on this - https://www.hongkiat./blog/synchronous-asynchronous-javascript/

In this case, since fetch is an i/o wait, the control moves to the next line - this.fetchData(). So, the fetchData() is called before delete may actually happens.

Following is another solution using async and await. More to read

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

You can also use async and await

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

本文标签： javascriptHow to update data after fetchStack Overflow