这是您正确向状态添加新项目的方式吗？答案

【问题标题】：Is this how you properly add a new item to the state?这是您正确向状态添加新项目的方式吗？
【发布时间】：2020-01-21 02:54:32
【问题描述】：

我正在尝试将 oldWorkout 对象添加到存储中，以便我可以使用我推入其中的内容，但无论我尝试什么，它都不会添加到存储中，即使我直接从 oldWorkout 对象开始状态，然后将数据推送到那里。

const initialState = {
    workoutlist: [],
}

const workoutList = (state = initialState, action) => {
    switch (action.type) {

        case 'LOAD_DATA':
            let oldWorkout = {};
            state.workoutlist.map((workout) => {
                if(workout.id === action.id){
                     return oldWorkout = Object.assign(workout);
                }
                return workout;
            });
            return state ={
                ...state,
                oldWorkout
            }

        default:
            return state;
    }
}

export default workoutList;

【问题讨论】：

标签： reactjs redux react-redux redux-form

【解决方案1】：

const initialState = {
 workoutlist: [],
 oldWorkout: {}
}

const workoutList = (state = initialState, action) => {
 switch (action.type) {

 case 'LOAD_DATA':
  return {
    ...state,
    workoutlist: state.workoutlist.map((workout) => {
      if (workout.id === action.id) {
        state.oldWorkout = Object.assign(workout);
      }
    return workout
    })
  };
default:
  return state;
 }
}

 export default workoutList

试试这个

【讨论】：

【解决方案2】：

这是改变 redux/component/class 状态最合适的方式

const initialState = {
    workoutlist: [],
    oldWorkout: null // add new property to state, use false or null
}

const workoutList = (state = initialState, action) => {
    switch (action.type) {

        case 'LOAD_DATA':
            const item = state.workoutlist.find(v => v.id === action.id) // just find item
            if (item) {
                return {
                    ...state, // copy old state to new state
                    oldWorkout: item // change oldWorkout
                }
            }
            return state

        default:
            return state;
    }
}

export default workoutList;

【讨论】：