React 钩子，API-JSON HOLDER答案

【问题标题】：React hooks, API-JSON HOLDERReact 钩子，API-JSON HOLDER
【发布时间】：2021-12-30 18:51:06
【问题描述】：

 const [mekala, setMekala]= useState({posts:[]})
    
 <button type="button" className="btn btn-warning" onClick{()=>deletePosts(post.id)}>DELETE</button>
    
 const deletePosts= async (pid) => {
    const { data } = await axios.delete(`${API}/${pid}`);
    console.log(data);
 }

每当我执行 deleteposts 功能时，它都会在服务器上被删除。

但要在 UI 上表示，我需要对数组执行过滤功能。

如何将 states(mekala) 的副本带到这里来编写过滤函数，以便我可以再次调用 setMekala 将删除的值分配给 state。在 UI 上表示。

【问题讨论】：

标签： reactjs api jsonplaceholder

【解决方案1】：

这种方法会减少代码行数

const deletePosts = async (pid) => {
  const { data } = await axios.delete(`${API}/${pid}`)
  setMekala(prevState => prevState.posts.filter(post => post.id !== data.post.id))
}

如果您将它与 React.useCallback 一起使用，您将减少一个依赖项。

const deletePosts = React.useCallback(async (pid) => {
  const { data } = await axios.delete(`${API}/${pid}`)
  setMekala(prevState => prevState.posts.filter(post => post.id !== data.post.id))
}, []); // <--- no deps needed in this case

在此处阅读有关 React.useState 挂钩的“功能更新”： https://reactjs.org/docs/hooks-reference.html#functional-updates

【讨论】：

【解决方案2】：

你应该这样做：

const deletePosts= async (pid) => {
  const {data}=await axios.delete(`${API}/${pid}`)
  const filteredPost = data.post;
  const filteredPostsList = mekala.posts.filter((post) => post.id !== 
  filteredPost.id);
  setMekala({posts: filteredPostsList})
}

【讨论】：

如果您将 deletePosts 函数包装到 React.useCallback 中，此解决方案将导致不必要的依赖。更好的方法是以函数的方式使用React.useState (setMekala)。