删除数据库记录后React的state变量为何自动更新？

你遇到的这个情况，核心问题出在useEffect的依赖数组设置上：

你的useEffect把users放进了依赖数组[users]，这意味着只要users状态发生变化，这个副作用就会重新执行，再次发起请求获取用户列表。

当你点击删除按钮调用deleteUser时，虽然你没直接调用setUsers，但因为之前的useEffect存在无限循环逻辑（初始渲染→请求数据→setUsers更新状态→users变化触发useEffect再次执行→再次请求数据→再次setUsers），这个循环一直在重复请求后端数据。当删除请求成功后，后端的用户列表已经更新，下一次useEffect发起的请求就会拿到最新的用户数据，通过setUsers更新状态，最终触发组件重渲染，让你看到了users数组的更新。

这种写法会导致频繁请求后端，属于不合理逻辑，建议修改如下：

1. 调整useEffect的依赖数组为空数组，让它只在组件挂载时执行一次，获取初始用户列表：

   useEffect(() => {
     fetch("http://127.0.0.1:8000/api/user/show")
       .then((res) => res.json())
       .then((data) => setUsers(data));
   }, []); // 空数组表示仅组件挂载时执行
   

2. 在deleteUser函数中，请求成功后手动更新本地状态（推荐），或者重新请求最新数据：

   function deleteUser(id) {
     axios.delete(`http://127.0.0.1:8000/api/user/delete/${id}`)
       .then(() => {
         // 方式一：手动过滤已删除的用户，无需再次请求后端
         setUsers(prevUsers => prevUsers.filter(user => user.id !== id));
         // 方式二：重新请求最新用户列表（适合需要确保与后端完全同步的场景）
         // fetch("http://127.0.0.1:8000/api/user/show")
         //   .then(res => res.json())
         //   .then(data => setUsers(data));
       })
       .catch(error => {
         console.error("删除失败:", error);
       });
   }
   

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