将新数组对象添加到react redux reducer中的嵌套数组，并将数组添加到存储更新中的数组，但不添加react组件

Question

我是一个新的反应和重复。我有一个任务，比如添加工作流，在工作流中有任务。我可以将新的工作流对象添加到状态数组中...但是当涉及到添加新任务时，它被直接添加到工作流数组中，而不是添加到任务数组中。下面是我的数组结构

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) => {

状态= state || initialState；

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};

}

Answer 1

希望这能有所帮助。

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' }]
                    }]
      };
}

Answer 2

在我走了这么多路之后。我已经创建了一个新数组，并将其作为有效负载传递，并将其分配给redux中的状态数组。

 if (action.type === ADD_NEWTASK) {

    state.WORKFLOWS = [];
    return { ...state, WORKFLOWS: action.data };
}

对我来说很管用。下面是我在组件中所做的事情。

      addingtask =() => { 
     console.log('Button Clicked');
     let i = this.props.WORKFLOWS[0].Tasks.length;
     let obj = { id: i+1, Title: 'Test' + 1, Content: 'Test' + 2, Status: 'Pending' };
     let newarray = [];
     newarray = this.props.WORKFLOWS;

     newarray[0].Tasks.push(obj);

     this.props.addnewtask(newarray);





}