React Hook中能否将两个数字状态求和存入新状态？求代码最佳实践

当然可以实现这个需求，先帮你修正原代码里的两处错误：

1. 第二个input的onChange回调里写错了状态更新函数，应该是setSizeMed而非sizeMed
2. 输入框返回的e.target.value是字符串类型，直接赋值会导致后续相加变成字符串拼接，必须转为数字

下面是几种实现方案和最佳实践：

方案1：更新子状态时同步计算总状态 #

在每个输入框的change事件里，先把输入值转为数字，更新对应尺寸状态的同时，直接计算总和并更新totalCount。这种方式适合逻辑简单、需要立即同步总状态的场景。

import { useState } from 'react';

function SizeCounter() {
  const [sizeSmall, setSizeSmall] = useState(0);
  const [sizeMed, setSizeMed] = useState(0);
  const [totalCount, setTotalCount] = useState(0);

  const handleSmallChange = (e) => {
    const inputValue = Number(e.target.value) || 0; // 处理空值/非数字，默认设为0
    setSizeSmall(inputValue);
    setTotalCount(inputValue + sizeMed);
  };

  const handleMedChange = (e) => {
    const inputValue = Number(e.target.value) || 0;
    setSizeMed(inputValue);
    setTotalCount(sizeSmall + inputValue);
  };

  return (
    <div>
      <input 
        type="number"
        value={sizeSmall}
        onChange={handleSmallChange}
        required
      />
      <input
        type="number"
        value={sizeMed}
        onChange={handleMedChange}
        required
      />
      <p>总数量：{totalCount}</p>
    </div>
  );
}

方案2：用useEffect自动监听状态变化 #

通过useEffect钩子监听sizeSmall和sizeMed的变化，只要其中一个状态更新，就自动重新计算并更新totalCount。这种方式适合子状态更新场景较多，不想重复写计算逻辑的情况。

import { useState, useEffect } from 'react';

function SizeCounter() {
  const [sizeSmall, setSizeSmall] = useState(0);
  const [sizeMed, setSizeMed] = useState(0);
  const [totalCount, setTotalCount] = useState(0);

  // 依赖数组里的状态变化时，自动计算总和
  useEffect(() => {
    setTotalCount(sizeSmall + sizeMed);
  }, [sizeSmall, sizeMed]);

  const handleSmallChange = (e) => {
    setSizeSmall(Number(e.target.value) || 0);
  };

  const handleMedChange = (e) => {
    setSizeMed(Number(e.target.value) || 0);
  };

  return (
    <div>
      <input 
        type="number"
        value={sizeSmall}
        onChange={handleSmallChange}
        required
      />
      <input
        type="number"
        value={sizeMed}
        onChange={handleMedChange}
        required
      />
      <p>总数量：{totalCount}</p>
    </div>
  );
}

最佳实践：使用派生状态，无需单独维护totalCount #

其实totalCount是由sizeSmall和sizeMed计算出来的派生状态，绝大多数场景下不需要把它单独存为useState。直接在渲染时计算即可，这样能避免状态不同步的问题，减少不必要的状态维护成本。

import { useState } from 'react';

function SizeCounter() {
  const [sizeSmall, setSizeSmall] = useState(0);
  const [sizeMed, setSizeMed] = useState(0);

  // 直接计算派生状态，不用单独存为state
  const totalCount = sizeSmall + sizeMed;

  const handleSmallChange = (e) => {
    setSizeSmall(Number(e.target.value) || 0);
  };

  const handleMedChange = (e) => {
    setSizeMed(Number(e.target.value) || 0);
  };

  return (
    <div>
      <input 
        type="number"
        value={sizeSmall}
        onChange={handleSmallChange}
        required
      />
      <input
        type="number"
        value={sizeMed}
        onChange={handleMedChange}
        required
      />
      <p>总数量：{totalCount}</p>
    </div>
  );
}

关键注意点 #

• 类型转换必须做：即使是type="number"的输入框，返回的value仍然是字符串，一定要用Number()转为数字，否则会出现"1"+"2"="12"的字符串拼接问题。
• 异常输入处理：用|| 0处理用户清空输入或输入非数字的情况，避免出现NaN导致页面显示异常。
• 状态同步风险：如果一定要单独维护totalCount状态，务必确保每次子状态更新时都同步更新总状态，或者用useEffect监听，否则会出现总状态与子状态不一致的bug。

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