Redux无法向数组状态中推入对象的问题求助

核心问题拆解 #

你的代码存在3个关键错误：

• 初始状态为数组，但reducer错误返回对象，破坏了状态结构
• 状态更新方式不符合Redux不可变要求，还出现拼写错误stae
• 提交函数未触发dispatch，导致数据从未传递到reducer

步骤1：修正Reducer函数 #

Redux要求状态更新必须不可变，数组状态需返回包含新元素的新数组，同时保持状态类型始终为数组：

import { NEWBOOK, DELETEBOOK } from "./actionTypes"

// 初始状态改为空数组（无需默认空对象）
const initialState = []

const bookingReducer = (state = initialState, action) => {
  switch (action.type) {
    case NEWBOOK:
      // 用扩展运算符生成新数组，添加payload对象
      return [...state, action.payload]

    case DELETEBOOK:
      // 补充删除逻辑：根据id过滤数组
      return state.filter(book => book.id !== action.payload)

    default:
      // 默认直接返回原状态，不要包装成对象
      return state
  }
}

export default bookingReducer

步骤2：修正Dispatch与提交逻辑 #

提交函数需触发dispatch传递数据，同时修正表单状态的初始值与更新方式：

// 直接取数组状态（假设store绑定该reducer）
const booked = useSelector((state) => state);
const dispatch = useDispatch();

const newBookDisp = (value) => {
  dispatch(newBook(value));
}

// inputData初始值应为对象，对应表单字段
const [inputData, setInputData] = useState({});

const handleOnChange = e => {
  const field = e.target.name;
  const value = e.target.value;
  // 用函数式更新确保获取最新状态
  setInputData(prev => ({ ...prev, [field]: value }));
}

const submitBook = (e) => {
  e.preventDefault();
  const { from, to, date, ticketclassName, guests } = inputData;
  // 基于当前数组长度生成唯一id
  const id = booked.length + 1;

  const allData = { from, to, date, ticketclassName, guests, id };
  // 关键：触发dispatch传递数据
  newBookDisp(allData);
  // 提交后清空表单
  setInputData({});
}

关键规则说明 #

1. 不可变更新：Redux状态只读，必须返回新状态。数组用[...原数组, 新元素]创建新数组，禁止用push修改原数组。
2. 状态类型一致：初始状态为数组，reducer所有分支必须返回数组，避免类型混乱。
3. 触发dispatch：组装数据后必须调用dispatch，否则action不会被发送到reducer，状态不会更新。

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