React Hooks调用JSONPlaceholder接口删除数据后如何同步更新UI状态

你可以通过React useState的函数式更新形式拿到最新的mekala状态快照，配合filter方法生成新数组后更新状态即可，具体逻辑如下：

修改后的deletePosts函数代码 #

const deletePosts= async (pid) => {
    const { data } = await axios.delete(`${API}/${pid}`);
    console.log(data);
    // 函数式更新的入参就是当前最新的mekala状态副本
    setMekala(prevState => {
        // Array.filter本身会返回新数组，不会修改原状态里的数组
        const filteredPosts = prevState.posts.filter(post => post.id !== pid)
        // 返回全新的状态对象，遵循React状态不可变原则
        return {
            ...prevState,
            posts: filteredPosts
        }
    })
}

补充注意点 #

• 你原有代码的删除按钮标签里onClick属性漏写了等于号，需要修正为onClick={()=>deletePosts(post.id)}，否则点击事件不会触发
• 用函数式更新的好处是可以保证拿到的始终是最新的mekala状态，避免因为闭包问题拿到旧状态导致更新异常
• filter方法本身就会生成新数组，不需要额外深拷贝posts数组，再配合展开运算符...生成新的状态对象，就能满足React状态更新的不可变要求

内容的提问来源于stack exchange，提问作者praveen