React中拼接数组元素为字符串后无法正确更新useState状态的问题求助

这个问题的核心原因很明确：你定义的values是组件内部的普通变量，而非React状态。

React组件每次调用setDisplay触发状态更新后，会重新执行整个组件函数。这时候const values = [];会被重新执行，values会被重置为空数组。所以每次点击时，你都是在一个全新的空数组里push当前点击值，自然只能得到单个元素的数组，最终display也只会显示当前点击的字符。

下面给你两种简洁的解决思路：

方案一：将values转为React状态 #

把values改成由useState管理的状态，这样它就能在组件重新渲染时保留之前的值：

const App = () => {
  const [display, setDisplay] = React.useState("");
  const [values, setValues] = React.useState([]); // 转为状态变量

  const onClick = (value) => {
    // 不要直接修改原数组，创建新数组保证不可变性
    const newValues = [...values, value];
    setValues(newValues);
    console.log(newValues); // 现在会正确输出累加后的数组
    setDisplay(newValues.join(""));
  };

  return (
    <div className="p-5">
      {display}
      <NumPads data={keypress} onClick={onClick} />
      <OperatorPads data={keypress} onClick={onClick} />
    </div>
  );
};

方案二：直接复用display状态（更简洁） #

其实你完全不需要额外维护values数组，因为display本身就是拼接后的字符串，直接基于它的历史状态追加新字符即可：

const App = () => {
  const [display, setDisplay] = React.useState("");

  const onClick = (value) => {
    // 使用函数式更新，确保拿到最新的display状态
    setDisplay(prevDisplay => prevDisplay + value);
    
    // 如果需要查看更新后的结果，可以用useEffect监听
    // React.useEffect(() => {
    //   console.log(display);
    // }, [display]);
  };

  return (
    <div className="p-5">
      {display}
      <NumPads data={keypress} onClick={onClick} />
      <OperatorPads data={keypress} onClick={onClick} />
    </div>
  );
};

这种方式减少了冗余状态，还能避免因为React状态更新的异步性导致的潜在问题。

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