Question

我有一个名为persons的数组，而我的状态中的selectedPersons都是空数组

state = {persons:[], selectedPersons:[]}

在componentnDidMount上我正在调用fetchPersons方法，我将响应存储在项目中

在componentDidMount

之后

state = {
    items: [
        {id:5,name:"test1"},
        {id:6,name:"test2"},
        {id:7,name:"test3"}
    ],
    selectedPersons:[]
}

点击我调用selectedPerson方法的每个项目，我传递了id

//示例

如果我点击'test1'，我将id 5传递给方法并发送一个动作

// reducer

case actionTypes.SELECTED_PERSON:
      return{
        ...state,
        selectedPersons: state.persons.map(obj => {
          if(obj.id === action.payload.personId){
            //console.log("obj", obj);
            //console.log("selectedPersons", state.selectedPersons);
             return {...obj}
           // how can i push each item initially the selectedPersons is 
           //  empty
          }
        })
      }

点击每个人后的预期输出

state = {
    items: [
        {id:5,name:"test1"},
        {id:6,name:"test2"},
        {id:7,name:"test3"}
    ],
    selectedPersons:[{id:5,name:"test1"}]
}

点击每个人时我需要更新selectedPersons数组而不改变

我已经尝试了{...state.selectedPersons, ...obj}但却没有工作

Answer 1

这会有用吗？

case actionTypes.SELECTED_PERSON: {
  const person = state.persons.find(p => p.id === action.payload.personId);
  return{
    ...state,
    selectedPersons: [...state.selectedPersons, person];
  }
}

Answer 2

有两种方法可以在不改变状态的情况下将对象推入数组。我通常做的是，我将selectedPerson对象作为有效负载传递给动作创建者，然后你可以在你的减速器中执行以下操作。

case actionTypes.SELECTED_PERSON :
    return { 
        ...state,
        //if object doesn't already exists push it otherwise slice it
        selectedPersons: [...state.selectedPersons, action.person]
    }

OR

case actionTypes.SELECTED_PERSON :
    return { 
        ...state,
        selectedPersons: state.selectedPersons.concat(action.person)
    }

使用ES6时，您应该使用第一个。

将已过滤的obj推送到react redux中的空数组

2 个答案: