Redux使用dispatch传递对象数组仅能传单个项如何解决？

问题核心错误点 #

你的问题确实出在projectSlice的逻辑上，共有3个核心错误：

1. 自定义的setProjects thunk中硬编码只读取了传入数组的第1项（projects[0]）构造数据，所以每次只能传1个项目
2. slice内的setProjects reducer的payload类型定义错误，你需要接收完整的Project数组，目前定义的是单个Project对象
3. reducer使用state.push是往现有数组追加元素，不符合你点击按钮后替换整个项目列表为指定数量的需求

修正方案 #

直接修改projectSlice代码即可：

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

import { AppThunk, AppDispatch } from '../../redux';
import { Project } from '../types';

const initialState: Project[] = [];

const projectSlice = createSlice({
    name: 'projects',
    initialState,
    reducers: {
        // 修改payload类型为Project数组，直接替换整个state
        setProjects(state, action: PayloadAction<Project[]>) {
            return action.payload;
        },
        filterProjects(state, action: PayloadAction<Project>) {
            let project = state.find((project) => project.id === action.payload.id);
            if (project) {
                project.completed = !project.completed;
            }
        }
    }
});

export const { filterProjects, setProjects } = projectSlice.actions;

// 如果你的projectData已经完全符合Project接口定义，下面这段自定义thunk可以直接删掉，用上面导出的原生action即可
// 如果需要对原始数据做字段补全，保留下面的thunk，注意是遍历整个数组处理每一项
/*
export const setProjects = (projects: any[]): AppThunk => 
  (dispatch: AppDispatch) => {
    const formattedProjects: Project[] = projects.map(item => ({
      id: item.id,
      desc: item.desc,
      name: item.name || '',
      fields: item.fields || [],
      client: item.client || '',
      timeline: item.timeline || '',
      website: item.website || '',
      thumb: item.thumb || [],
      images: item.images || [{ src: '', id: '' }],
      icons: item.icons || [{ src: '', id: '' }],
      intro: item.intro || '',
      url: item.url || '',
      git: item.git || '',
      gitUrl: item.gitUrl || '',
      completed: item.completed || false
    }));
    dispatch(projectSlice.actions.setProjects(formattedProjects));
  };
*/

export default projectSlice.reducer;

额外说明 #

你当前的场景没有异步逻辑，不需要用thunk，直接导出slice原生的setProjects action使用即可，原有组件的调用逻辑不需要做任何修改，改完就能实现点击按钮切换显示9/18个项目的需求。

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