React组件counter无法正常增减、修改count后描述列内容丢失问题

问题根因梳理 #

你遇到的两个故障都和代码逻辑、接口处理的常见误区相关，具体根因如下：

计数器无法正常增减的根因 #

• React的setCount是异步更新方法，直接基于当前count计算新值时，连续快速点击会拿到未更新的旧状态值，导致计数错误
• 虽然当前写法单次点击传值暂时正确，但不符合React状态更新的最佳实践，极易出现计数偏差

修改count后描述列被删除的根因 #

• 后端PUT接口大概率采用全量覆盖的更新逻辑，你请求时只传了newCount字段，其他字段（比如描述内容）会被默认置空存入数据库
• 更新完成后强制执行window.location = "/"刷新页面，单页应用强制刷新会清空所有前端临时状态，同时从数据库拉取到已经丢失描述字段的todo数据，最终表现为条目被删除

修复步骤 #

第一步：修复计数器逻辑 #

1. 状态更新改用函数式更新，确保每次都能拿到最新的前序状态
2. 移除调用增减函数时冗余的todo_id参数（函数定义未接收该参数，属于无效传值）
3. 可选优化：将updateCount调用和状态更新解耦，避免异步更新导致的传值不一致

第二步：修复描述列丢失问题 #

1. 删掉强制刷新页面的代码window.location = "/"，React单页应用无需刷新即可更新视图
2. 调整后端PUT接口为部分更新逻辑，仅修改传入的count字段，其他字段保持原有值不变；如果后端只能做全量更新，请求时需要把todo的所有字段（包括描述）都传入请求体
3. 可选优化：请求成功后拉取最新的todo列表，或者用接口返回的更新后todo数据替换本地列表中的对应项，完成视图更新

修正后的参考代码 #

import React, { useState, useEffect } from 'react';

const Quantity = ({ todo, onUpdateSuccess }) => {
  const [count, setCount] = useState(+todo.count);
  
  // 监听外部todo.count变化，同步本地状态，避免数据不一致
  useEffect(() => {
    setCount(+todo.count);
  }, [todo.count]);

  function decrementCount() {
    const newCount = count - 1;
    setCount(prev => prev - 1);
    updateCount(newCount);
  }

  function incrementCount() {
    const newCount = count + 1;
    setCount(prev => prev + 1);
    updateCount(newCount);
  }

  const updateCount = async (newCount) => {
    console.log("this is the newCount", newCount)  
    try {
      const body = { "newCount" : newCount }
      const response = await fetch(
        `http://localhost:5000/todos/${todo.todo_id}`,
        {
          method: "PUT",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(body)
        }
      );
      // 替换原有的强制刷新，调用父组件传入的更新回调刷新列表
      onUpdateSuccess?.();
    } catch (err) {
      console.error(err.message);
    }
  }

  return (
    <>
      <button onClick={decrementCount}>-</button>
      <span>{count}</span>
      <button onClick={incrementCount}>+</button>
    </> 
  )
}

export default Quantity;

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