React Hooks搭配Formik开发调研表单时投票数值未正确累加问题

问题根源 #

你遇到的数值拼接问题核心是数据类型不匹配，同时存在多处逻辑错误：

1. 从接口拉取投票值时，仅对voteone做了parseInt数值转换，其余三个投票值都是字符串类型，执行+运算时会触发字符串拼接而非数值累加
2. 你错误使用map方法处理接口返回数据，map返回的是数组而非单个数值，把数组赋值给计数状态后运算逻辑会完全异常
3. 点击修改计数时仅更新了React本地state，没有同步更新Formik维护的表单值，最终提交表单时会上传旧的计数数据

修复方案 #

1. 修正接口数据处理逻辑

修改getInitialValues方法，统一处理数值转换，避免重复调用接口：

async function getInitialValues() {
  try {
    const response = await axios.get(
      `${process.env.REACT_APP_LOCALHOST_DEVELOPMENT_VOTING_API_GET}`,
    );
    // 假设接口返回单条投票数据，直接取第一个结果，全部字段转数值
    const voteData = response.data[0];
    return {
      voteone: parseInt(voteData.voteone) || 0,
      votetwo: parseInt(voteData.votetwo) || 0,
      votethree: parseInt(voteData.votethree) || 0,
      votefour: parseInt(voteData.votefour) || 0,
      helptext: '',
    };
  } catch (error) {
    console.error(error);
    // 接口异常时返回默认值兜底
    return {
      voteone: 0,
      votetwo: 0,
      votethree: 0,
      votefour: 0,
      helptext: '',
    }
  }
}

2. 优化数据初始化逻辑

修改useEffect，仅调用一次接口获取所有数据，避免重复请求：

useEffect(() => {
  getInitialValues().then((res) => {
    setCount(res.voteone);
    setCountOne(res.votetwo);
    setCountTwo(res.votethree);
    setCountThree(res.votefour);
  });
}, []);

3. 修正点赞点击逻辑

所有点赞图标的onClick事件需要同时更新本地state和Formik表单值，并且强制做数值转换避免拼接：
以第一个点赞按钮为例：

<Field
  type="hidden"
  name="count"
  component={ThumbUpAltIcon}
  onClick={() => {
    const newVal = Number(count) + 1;
    setCount(newVal);
    setFieldValue('count', newVal);
  }}
  style={{ color: '#C4C4C4', marginRight: '0.4em' }}
/>

其余三个按钮对应修改即可：

• 第二个：变量替换为countone，setFieldValue第二个参数传入countone对应的新值
• 第三个：变量替换为counttwo
• 第四个：变量替换为countthree

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