Question

我有以下问题...

我想在我的本机应用程序中使用redux将对象添加到对象数组中。我收到此错误消息：

尝试传播不可迭代的实例无效


// my action

export function newTaskAction(){
  return{
    type: ADD_NEW_TASK,
    payload: {
      new: { id: '5', task:'test123'}
    }
  }
}



//my reducer

export default function taskReducer(state = initialUserState, action){
    switch (action.type)
    {
        case ADD_NEW_TASK :
            return {
                ...state,
                tasks: [...state.tasks, payload.new]
            }
        default:
            return state
    }




const store = createStore(allReducers, {
 tasks: [
   {id: "1", task: "React Native lernen"},
   {id: "2", task: "Redux lernen"},
   {id: "3", task: "Etwas lesen"},
   {id: "4", task: "Einkaufen gehen"}
 ],
 user: 'Frank'
});

Answer 1

更改此行

[...state.tasks, payload.new]

到

tasks: [...state.tasks, action.payload.new]

Answer 2

不是吗？

return { ...state, tasks: [...state.tasks, action.payload.new] }

缺少action

Answer 3

请使用Object.assign

 case Actions.CART_ADD_ITEM: 
        return Object.assign({}, state, { tasks: [...state.tasks,  { id: '5', task:'test123'}] });

请像这样使用“视图”中的任务列表

const mapStateToProps = (state) => ({
tasksList: state.tasksReducer.tasks} 
);


<FlatList
    data={this.props.tasksList}/>

Answer 4

在初始状态下，如果您已定义任务：null，则当您尝试对[... state.tasks]进行散布运算符时，会因为它为null而引发错误。而是定义任务：[]。您没有将其发布为代码示例的一部分，因此仅根据我遇到相同错误的时间进行猜测。

Redux将对象添加到数组

4 个答案: