时间戳

首页 > 解决方案 > 将新数组对象添加到 react redux reducer 中的嵌套数组和 store 更新中的数组，但不添加 react 组件

reactjs - 将新数组对象添加到 react redux reducer 中的嵌套数组和 store 更新中的数组，但不添加 react 组件

问题描述

我是 React 和 redux 的新手。我有一个任务，比如添加工作流，在工作流内部有任务。我可以将新的工作流对象添加到状态数组中......但是在添加新任务时，它会直接添加到工作流数组中，而不是任务数组中。这是我的数组结构

const initialState = 
{ WORKFLOWS: 
[{ id: 1, Title: 'testdata1', Status: 'Completed',
 Tasks: [{ id: 1, Title: 'Task1', Content: 'Test Content', Status: 'Pending' }, { id: 2, Title: 'Task2', Content: 'Test Content2', Status: 'Pending' }] }, 
{ id: 2, Title: 'testdata2', Status: 'Pending', 
Tasks:[ { id: 2, Title: 'Task1', Content: 'Test Content', Status: 'Pending' }] }], workflowid: 3, isloading: false};

这是我的减速机

   export const reducer = (state, action) => {

状态 = 状态 || 初始状态；

if (action.type === ADD_WORKFLOW) {

    return {
        ...state,
        WORKFLOWS: [...state.WORKFLOWS, { id: state.workflowid++, Title: 'Workflow' + state.workflowid, Status: 'Pending', Tasks : [] }]
        //WORKFLOWS: [...state.WORKFLOWS, [{ id: state.workflowid++, Title: 'Workflow' + state.workflowid, Status: 'Pending' }]]
    };
   }

if (action.type === EDIT_WORKFLOWTITLE) {
    const index = state.WORKFLOWS.map(item => item.id).indexOf(action.itemid);
    console.log(index);
    return {
        ...state, WORKFLOWS: [...state.WORKFLOWS.map(todo =>
            todo.id === action.itemid ? { ...todo, Title: action.itemtitle } : todo
        )]
    } 
}
if (action.type === EDIT_WORKFLOWSTATUS) {

    return {
        ...state, WORKFLOWS: [...state.WORKFLOWS.map(todo =>
            todo.id === action.itemid ? { ...todo, Status: (todo.Status === 'Pending') ? 'Completed' : 'Pending' } : todo
        )]
    }
}
if (action.type === DELETE_WORKFLOW) {
    const index = state.WORKFLOWS.map(item => item.id).indexOf(action.payload);

    return { ...state, WORKFLOWS: [...state.WORKFLOWS.slice(0, index).concat(state.WORKFLOWS.slice(index + 1))] };
}
if (action.type === ADD_TASK) {
    console.log(state.WORKFLOWS);
    return {
        ...state,
        WORKFLOWS: [...state.WORKFLOWS,
            {
               Tasks: [...state.WORKFLOWS[1], { id: state.workflowid++, Title: 'Workflow' + state.workflowid, Content: 'Workflow' + state.workflowid, Status: 'Pending' }]

        }]


    };

}

  return state;
   };

我正面临 add_task 操作的问题，这是单击添加任务时的输出

0: {id: 1, Title: "testdata1", Status: "Completed", Tasks: Array(2)}
 1: {id: 2, Title: "testdata2", Status: "Pending", Tasks: Array(1)}
  2: {Tasks: Array(1)}

我也试过下面的代码数组得到更新，但视图没有更新。

   if (action.type === ADD_TASK) {
       let obj = { id: state.workflowid++, Title: 'Workflow' + state.workflowid, Content: 'Workflow' + state.workflowid, Status: 'Pending' };
    let newarray = [];
    newarray = state.WORKFLOWS;
    newarray[1].Tasks.push(obj);
    console.log(newarray);
    console.log(state.WORKFLOWS)
    return {...state, WORKFLOWS: newarray};

}

标签： reactjstypescriptreact-redux

解决方案

希望这可以帮助。

if (action.type === ADD_TASK) {
    console.log(state.WORKFLOWS);
    return {
    ...state,
        WORKFLOWS: [...state.WORKFLOWS,
                    { id: state.workflowid++, Title: 'Workflow' + state.workflowid, Content: 'Workflow' + state.workflowid, Status: 'Pending', 
                       Tasks: [ { id: 3, Title: 'Task3', Content: 'Test Content', Status: 'Pending' }]
                    }]
      };
}

推荐阅读