如何让接收三个参数的useReducer官方文档示例正常运行

你代码的核心问题是调用CounterFunction组件时未传入必填的initialCount属性，导致init函数接收到的入参为undefined，初始状态的count值异常，后续加减操作都会得到NaN。

useReducer(reducer, initialArg, init)三参数调用规则如下：

• 第一个参数为reducer函数，负责处理所有状态更新逻辑
• 第二个参数为初始入参，会作为参数传递给init函数
• 第三个参数init为初始化函数，组件首次渲染时会自动执行，执行入参就是上述第二个参数，返回值就是useReducer的初始状态值
• 这种写法的优势是可以复用初始化逻辑，比如你代码中重置操作也调用同一个init函数，避免重复编写状态初始化代码

两种可行方案任选其一即可：

方案1：给组件props设置默认值 #

修改CounterFunction的参数定义，给initialCount设置默认值：

// 修改前
// function CounterFunction({ initialCount }) {
// 修改后
function CounterFunction({ initialCount = 0 }) {

方案2：调用组件时传入初始值 #

修改Counter组件中CounterFunction的调用代码，传入指定初始值：

export function Counter() {
  return (
    <>
      <CounterFunction initialCount={0} />
    </>
  );
}

import { useReducer } from "react";

function init(initialCount) {
  return { count: initialCount };
}

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return init(action.payload);
    default:
      throw new Error();
  }
}

function CounterFunction({ initialCount = 0 }) {
  const [state, dispatch] = useReducer(reducer, initialCount, init);
  return (
    <>
      Count: {state.count}
      <button
        onClick={() => dispatch({ type: "reset", payload: initialCount })}
      >
        Reset
      </button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
    </>
  );
}

export function Counter() {
  return (
    <>
      <CounterFunction />
    </>
  );
}

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