如何正确向useReducer() Hook的dispatch函数传递参数

• useReducer的reducer函数参数定义错误：标准reducer函数需要接收两个形参，第一个是当前最新的state，第二个是dispatch触发时传入的action参数。你的代码里reducer只定义了一个形参，根本没有接收dispatch传参的入口，所以点击按钮传的参数完全不会被reducer读取到。
• 更新逻辑判断数据源错误：原有逻辑用旧state里存储的flag值判断做加/减操作，而不是用本次dispatch传入的新操作标记，就算参数能正常接收，逻辑判断也是错的。
• 减计数按钮触发dispatch时没有传入任何参数，reducer就算参数定义正确，也拿不到减操作对应的标记值。

改动点完全贴合你原本的代码结构，没有额外重构逻辑：

import "./styles.css";
import { useReducer } from "react";

export default function App() {
  const [counterValue, setCounterValue] = useReducer(
    // 给reducer添加第二个形参action，接收dispatch传入的参数
    (prevState, action) => {
      // 用传入的操作标记判断更新逻辑，兼容未传参的边界情况
      const shouldInc = action?.[1] ?? false;
      return shouldInc 
        ? [prevState[0] + 1, true] 
        : [prevState[0] - 2, false];
    },
    [1, false]
  );
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>
        Start editing to see [{counterValue[0]}, {counterValue[1].toString()}]
        magic happen!!
      </h2>
      <button onClick={() => setCounterValue([null, true])}>Inc</button>
      {/* 给减操作按钮补上对应的传参 */}
      <button onClick={() => setCounterValue([null, false])}>Dec</button>
    </div>
  );
}

注：你原本点击加按钮传的[1, true]里的第一个元素1在更新逻辑里完全没有用到，计数更新是基于旧state的计数值计算的，所以这里传null占位即可，你也可以直接把action简化为布尔值，不需要传数组，代码会更简洁。

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