在useEffect中设置State时POST请求为何失效？

1. 为什么会出现无限循环？ #

你去掉console.log改用setStatus(response)后触发无限循环的核心原因：

• 未指定依赖数组的useEffect会在组件每次渲染完成后自动执行
• setStatus(response)会更新组件状态，触发组件重新渲染
• 渲染完成后useEffect再次执行，再次调用setStatus，形成循环

2. 加空依赖数组后POST请求失效的原因 #

给useEffect加空数组[]后，它只会在组件首次挂载时执行一次：

• 由于JavaScript闭包特性，useEffect内部捕获的是组件挂载时的初始status值
• 后续点击按钮修改status时，组件会重新渲染，但useEffect不会再触发，自然不会发起新的POST请求
• 你看到console.log(status)能输出更新后的值，是因为组件重新渲染了，但这不会触发仅挂载一次的useEffect

3. 正确的解决方案 #

方案一：仅在用户操作时发起POST请求（推荐） #

把POST请求逻辑移到incrementSetpoint函数里，只在用户点击按钮修改setpoint时发起请求，避免不必要的重复请求：

function incrementSetpoint() {
  // 先更新本地状态
  setStatus(prev => {
    const newStatus = {
      ...prev,
      setpoint: prev.setpoint + 1
    };
    // 发起POST请求
    fetch('/heaters', {
      method: 'POST',
      headers: { 'Content-type': 'application/json' },
      body: JSON.stringify(newStatus)
    })
    .then(res => res.json())
    .then(response => {
      // 如果后端返回的状态有差异，同步到本地
      if (JSON.stringify(response) !== JSON.stringify(newStatus)) {
        setStatus(response);
      }
    })
    .catch(err => console.error(err));
    return newStatus;
  });
}

同时删除原来的useEffect，这样既不会有循环问题，每次用户操作都会发起POST请求。

方案二：用useEffect监听status变化，避免循环 #

如果需要在status变化时自动发起请求，给useEffect添加status作为依赖，同时通过判断避免循环：

useEffect(() => {
  fetch('/heaters', {
    method: 'POST',
    headers: { 'Content-type': 'application/json' },
    body: JSON.stringify(status)
  })
  .then(res => res.json())
  .then(response => {
    // 仅当返回的状态与当前状态不同时才更新，避免循环
    if (response.setpoint !== status.setpoint) {
      setStatus(response);
    }
  })
  .catch(err => console.error(err));
}, [status]); // 监听status变化

// 修复incrementSetpoint的闭包问题
function incrementSetpoint() {
  setStatus(previousValue => ({
    ...previousValue,
    setpoint: previousValue.setpoint + 1
  }));
}

补充：修复incrementSetpoint的闭包问题 #

你原来的incrementSetpoint函数里用了status.setpoint，会导致闭包捕获旧的status值，改用previousValue.setpoint才能确保每次拿到最新的状态值。

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