React useReducer Hook中action的Parameters显示undefined问题求助

你的代码： #

import styles from "./Row1.module.css";
import { useEffect, useReducer } from "react";
import PercentageBar from "./PercentageBar";

//Depending on the type of action we need to change the value of the state variables

const Row1 = (props) => {
  const Parameters = props.Parameters;

  const Reducer = (
    state = { Temp: 0, Hum: 0, AQI: 0, Pres: 0, Alt: 0 },
    action,
  ) => {
    console.log(action.Parameters);
    return { ...state, Temp: Parameters[0] };
  };

  useEffect(() => {
    dispatch(Parameters);
  }, [props.Parameters]);

  const [state, dispatch] = useReducer(Reducer, {
    Temp: 0,
    Hum: 0,
    AQI: 0,
    Pres: 0,
    Alt: 0,
  });

  return (
    <div className={styles.row1}>
      <PercentageBar Percentage={state.Temp} />
      <PercentageBar Percentage={state.Pres} />
      <PercentageBar Percentage={state.Hum} />
      <PercentageBar Percentage={state.Alt} />
      <PercentageBar Percentage={state.AQI} />
    </div>
  );
};

export default Row1;

问题描述： #

这是我React项目里的组件，我正在学习useReducer Hook（虽然这个项目用它没必要），把Parameters数组作为action传入dispatch函数，但在reducer里执行console.log(action.Parameters)时，控制台显示该值为undefined。我是开发新手，想找出错误原因。

错误原因及解决方法： #

1. action格式不符合规范

你直接把Parameters数组传给dispatch，此时reducer里的action就是这个数组本身，而数组没有Parameters属性，所以打印结果是undefined。React的useReducer约定action是包含type字段的对象，通常会把数据放在payload属性里。

2. reducer依赖外部变量，违反纯函数原则

你的reducer直接使用了外部的Parameters变量，这会让reducer失去纯函数特性（纯函数应该只依赖传入的state和action参数），一旦外部变量变化，reducer的行为会不可预测。

3. useEffect位置错误

你把useEffect写在了useReducer声明之前，此时dispatch还未定义，运行时会直接抛出"dispatch is not defined"的错误，必须把useReducer的声明移到useEffect前面。

修改后的完整代码： #

import styles from "./Row1.module.css";
import { useEffect, useReducer } from "react";
import PercentageBar from "./PercentageBar";

const Row1 = (props) => {
  const Parameters = props.Parameters;

  // 纯函数reducer，仅依赖state和action
  const reducer = (state, action) => {
    switch(action.type) {
      case 'UPDATE_PARAMETERS':
        // 从action.payload解构参数数组，对应到各个状态字段
        const [temp, hum, aqi, pres, alt] = action.payload;
        return {
          ...state,
          Temp: temp,
          Hum: hum,
          AQI: aqi,
          Pres: pres,
          Alt: alt
        };
      default:
        return state;
    }
  };

  // 先声明useReducer，确保dispatch可用
  const [state, dispatch] = useReducer(reducer, {
    Temp: 0,
    Hum: 0,
    AQI: 0,
    Pres: 0,
    Alt: 0,
  });

  useEffect(() => {
    // 传入符合规范的action对象：包含type和payload
    dispatch({
      type: 'UPDATE_PARAMETERS',
      payload: Parameters
    });
  }, [Parameters]);

  return (
    <div className={styles.row1}>
      <PercentageBar Percentage={state.Temp} />
      <PercentageBar Percentage={state.Pres} />
      <PercentageBar Percentage={state.Hum} />
      <PercentageBar Percentage={state.Alt} />
      <PercentageBar Percentage={state.AQI} />
    </div>
  );
};

export default Row1;

关键说明： #

• 给action添加type字段，方便后续扩展不同的状态更新逻辑（比如单独更新某一个指标）
• 把参数放在action.payload中，reducer从这里读取数据，保证纯函数特性
• 调整useReducer和useEffect的顺序，避免dispatch未定义的错误
• 用解构赋值将Parameters数组的元素对应到各个状态字段，确保所有状态都能同步更新

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