React发送HTTP请求后如何防止state重置丢失其他数据？

你的判断完全准确，bug出在PATCH请求成功后的状态更新逻辑：
你当前写的setTodos([response.data])会直接把todos状态整体替换为仅包含当前更新单条待办的数组，原先存储的其他所有待办数据都会被直接覆盖，这就是其他待办消失、刷新页面才会恢复的原因。

另外代码里还有一处隐藏的逻辑错误：复选框触发onChange事件时，e.target.checked已经是用户操作后的最新状态，你写的const x = !e.target.checked做了多余的取反，会导致提交给服务端的选中状态和用户实际操作反向。

更新单条待办状态时，需要基于原有state做增量替换，不要直接覆盖整个数组，推荐使用React函数式状态更新的写法，避免闭包拿到旧state导致更新异常：

• 遍历原有todos数组
• 找到id和当前更新项匹配的条目，替换为接口返回的最新数据
• 其余不匹配的条目保持原值不变

修正后的核心逻辑代码如下：

const saveInput = (e, id) => {
  // 移除多余取反逻辑，直接取复选框最新状态
  const completedStatus = e.target.checked;

  axios
    .patch(`http://127.0.0.1:8000/todo/todos/${id}/`, {
      completed: completedStatus,
    })
    .then(
      (response) => {
        // 基于原有状态做单条替换，不会覆盖其他待办数据
        setTodos(prevTodos => 
          prevTodos.map(todo => todo.id === id ? response.data : todo)
        );
      },
      (error) => {
        console.log(error);
      }
    );
};

这里使用setTodos的函数式更新写法，可以保证始终拿到最新的前序状态，适配你当前代码里的防抖逻辑，避免快速连续点击复选框时出现状态更新错误。

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