React中如何点击按钮获取值并实现多次追加显示？

当前代码的问题在于，点击按钮时直接用新的按钮值替换了原有显示内容，导致无法实现多次点击追加的效果。只需修改onClick事件中的状态更新逻辑即可解决：

修改核心点 #

• 将直接替换number值的逻辑，改为拼接原有内容与新按钮值
• 推荐使用函数式更新方式，确保获取到最新的状态值，避免异步更新带来的问题

修改后的完整代码 #

import { useState } from "react";

function App() {
  const [data, setData] = useState({ number: "" });

  return (
    <>
      <h1>Calculator screen: {data.number}!</h1>

      <button
        type="button"
        value="1"
        onClick={(e) => setData(prevData => ({ 
          ...prevData, 
          number: prevData.number + e.target.value 
        }))}
      >
        1
      </button>
    </>
  );
}

export default App;

补充说明 #

使用setData(prevData => {...})这种函数式更新的原因是：React的状态更新可能是异步的，当更新依赖于之前的状态时，函数式更新能确保我们拿到的是最新的状态快照，避免出现状态不同步的问题。如果只是简单场景，直接用data.number + e.target.value也能工作，但函数式更新更健壮。

内容的提问来源于stack exchange，提问作者Zoltán Fodor