React基于useState实现Reset按钮重置为默认值的代码修改方法

你代码的核心错误是对useState的返回值用法不对：React的useState仅返回长度为2的数组，分别是状态值和状态更新函数，你解构出来的第三个值setDefaultNumber本身是不存在的，自然无法实现重置功能。

要实现重置功能，你需要先把第一次生成的随机初始值单独存储，点击重置按钮时直接将count状态赋值为这个初始值即可。

修正后的完整代码如下：

//App.tsx
import React, { useState } from "react";

// 单独提取初始值生成函数
function generateRandomInteger() {
  return Math.floor(Math.random() * 100);
}

function App(props) {
  // 存储初始值，只在组件第一次渲染时生成一次
  const initialCount = generateRandomInteger();
  // 修正useState用法，仅解构两个返回值
  const [count, setCount] = useState(initialCount);

  function clickHandler(e) {
    setCount(Math.floor(Math.random() * 100));
  }

  return (
    <div style={{ margin: "auto", width: 100, display: "block" }}>
      <h1> {count} </h1>

      <p>
        <button onClick={clickHandler}> Click </button>
        <button
          className="Set Default Number"
          // 重置直接赋值为初始值即可
          onClick={() => setCount(initialCount)}
        >
          Reset
        </button>
      </p>
    </div>
  );
}

export default App;

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