React Redux中修改数组内布尔值（reserved）问题求助

问题核心 #

你遇到的问题主要有两个：

• 点击事件中依赖的reserved变量未正确从Redux状态中获取，导致判断逻辑完全失效
• 可能存在组件未正确订阅Redux中rockets状态、按钮id绑定错误的情况

修复步骤 #

1. 组件正确获取Redux状态 #

在组件中通过useSelector订阅完整的rockets数组，确保能拿到每个rocket的最新状态：

import { useSelector, useDispatch } from 'react-redux';
import { reserveRocket, cancelReservation } from './path-to-your-rocket-slice';

function RocketsComponent() {
  // 从Redux store中获取rockets列表
  const rockets = useSelector(state => state.rockets.rockets);
  const dispatch = useDispatch();

  // 后续逻辑写在这里
}

2. 修正点击事件处理逻辑 #

不再依赖未定义的reserved变量，而是通过rocket的id找到对应数据，基于当前状态执行操作：

const reservedHandler = (rocketId) => {
  const targetRocket = rockets.find(rocket => rocket.id === rocketId);
  if (targetRocket) {
    targetRocket.reserved 
      ? dispatch(cancelReservation(rocketId)) 
      : dispatch(reserveRocket(rocketId));
  }
};

3. 优化按钮绑定方式 #

避免通过e.target.id获取id（按钮内部嵌套元素会导致target指向错误），直接传递rocket的id：

{rockets.map(rocket => (
  <div key={rocket.id}>
    <h3>{rocket.rocketName}</h3>
    <button onClick={() => reservedHandler(rocket.id)}>
      {rocket.reserved ? '取消预订' : '预订火箭'}
    </button>
  </div>
))}

4. 完善Slice的异步状态处理 #

你的getRockets异步thunk需要配置extraReducers，确保接口数据正确存入store：

const rocketsSlice = createSlice({
  name: 'rockets',
  initialState: {
    rockets: [],
    status: '',
    loading: true,
  },
  reducers: {
    reserveRocket(state, action) {
      // 利用Immer直接修改状态，无需手动返回新对象
      state.rockets = state.rockets.map(rocket => 
        rocket.id === action.payload ? {...rocket, reserved: true} : rocket
      );
    },
    cancelReservation(state, action) {
      state.rockets = state.rockets.map(rocket => 
        rocket.id === action.payload ? {...rocket, reserved: false} : rocket
      );
    },
  },
  // 添加异步thunk的状态处理
  extraReducers: (builder) => {
    builder
      .addCase(getRockets.pending, (state) => {
        state.loading = true;
        state.status = 'loading';
      })
      .addCase(getRockets.fulfilled, (state, action) => {
        state.loading = false;
        state.status = 'success';
        state.rockets = action.payload;
      })
      .addCase(getRockets.rejected, (state) => {
        state.loading = false;
        state.status = 'failed';
      });
  },
});

关键注意事项 #

• 所有状态判断必须基于Redux store中的最新数据，不能使用未定义的局部变量
• Redux Toolkit内置Immer，reducer中可以直接修改state，无需手动构造新对象
• 避免通过DOM元素获取数据，直接从组件的props/状态中传递参数更可靠

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