React.js计算器数字无法拼接显示的问题修复求助

问题描述 #

我用React写了个简易计算器，输入数字时比如输入“40”，显示屏只会依次显示4、0，没法拼成完整的多位数展示；不过点“=”后的最终计算结果是对的（比如40+50=90）。输入过程中只能逐个显示数字，试了好多修复方法都没用，求解决。

问题原因 #

问题出在数字按钮的状态更新逻辑上。React的useState更新是异步的，直接依赖当前的displayValue状态值进行拼接时，连续点击数字按钮可能会获取到旧的状态值，导致无法正确拼接多位数。比如连续点击4和0时，第二次更新可能还是基于初始的'0'状态，直接设置为'0'而非'40'。

修复方案 #

将数字处理部分的setDisplayValue改为函数式更新，确保每次都基于最新的状态进行拼接；同时单独处理小数点按钮，避免被误判为操作符。

修复后的完整代码 #

import React, { useState } from 'react';

const Calculator = () => {
  const [displayValue, setDisplayValue] = useState('0');
  const [operations, setOperations] = useState([]);

  const handleClick = (e) => {
    const value = e.target.getAttribute('data-value');
    if (value === 'C') {
      setDisplayValue('0');
      setOperations([]);
    } else if (value === 'CE') {
      setDisplayValue('0');
      setOperations(operations.slice(0, -1));
    } else if (value === '=') {
      const result = eval(operations.join(''));
      setDisplayValue(result);
      setOperations([]);
    } else if (!isNaN(value)) {
      // 使用函数式更新获取最新状态，避免异步更新导致的旧值依赖
      setDisplayValue(prevDisplay => prevDisplay === '0' ? value : prevDisplay + value);
    } else if (value === '.') {
      // 单独处理小数点，防止重复添加
      setDisplayValue(prevDisplay => prevDisplay.includes('.') ? prevDisplay : prevDisplay + value);
    } else {
      // 处理操作符按钮
      if (displayValue !== '') {
        setOperations([...operations, displayValue, value]);
        setDisplayValue('');
      }
    }
  };

  const renderButtons = () => {
    const buttons = [
      ['7', '8', '9', '+'],
      ['4', '5', '6', '-'],
      ['1', '2', '3', '/'],
      ['.', '0', 'C', '=']
    ];

    return buttons.map((row) => {
      return (
        <div className="button-row" key={row.join(',')}>
          {row.map((button) => {
            return (
              <button
                key={button}
                data-value={button}
                onClick={handleClick}
              >
                {button}
              </button>
            );
          })}
        </div>
      );
    });
  };

  return (
    <div className="calculator">
      <div className="display">{displayValue}</div>
      {renderButtons()}
    </div>
  );
};

export default Calculator;

关键修复点说明 #

1. 函数式更新状态：数字按钮的setDisplayValue改用prevDisplay参数获取最新状态，确保每次拼接都是基于当前最新的显示屏值，解决异步更新导致的状态不一致问题。
2. 单独处理小数点：原来的代码会把小数点当成操作符处理，现在单独判断小数点，实现正确的小数输入逻辑，且避免重复添加小数点。
3. 添加列表key：给按钮行添加了唯一key，符合React列表渲染规范，消除控制台警告。

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