在 reducer 中更新对象的状态

Question

我是反应js的新手。在这里，我确实有一个功能，可以添加或删除三个差异行。我有一个减速器，就像，

const initialState = {
    Low: [
        {
            id: 'L0',
            technologyId: 0,
            technology: '',
            type: '',
            count: '',
            level: 'EASY'
        }
    ],
    Medium: [
        {
            id: 'M0',
            technologyId: 0,
            technology: '',
            type: '',
            count: '',
            level: 'Medium'
        }
    ],
    High: [
        {
            id: 'H0',
            technologyId: 0,
            technology: '',
            type: '',
            count: '',
            level: 'Tough'
        }
    ],

所以，在这里，我想把它作为一个通用的，所以，我试图在点击加号时添加对象并在 - 上删除。所以，

在这里，我正在添加使用，

const tempObj = {
      id: tempvar + id,
      technologyId: 0,
      technology: temp[0].technology,
      type: type,
      count: '',
      level: addtype
    }

我现在创建这个对象取决于我将它添加到那个特定数组中的 addType。

我就是用这种方式做的，

const addData = [...this.props.lowData[addtype], tempObj];

    this.props.addNewTech(addData);

所以，这里...this.props.lowData[addtype] 返回一个对象而不是数组，这是问题所在吗？如果是，它应该返回一个数组而不是对象，但是这如何返回对象而不是数组。 我的 props.lowData 就像，

一个具有三个不同数组的对象，我的意思是与reducer的相同。但是每次我添加它时，它只会在Low数组中添加该元素，而不是在medium或high中。谁能帮我解决这个问题？

Answer 1

问题出在你只更新Low 属性的reducer 中。您需要检查哪些属性需要更新。为此，您可以像这样将addtype 传递给您的动作创建者

this.props.addNewTech({ addData, addtype });

然后在行动创建者

export function addNewTech(data) { 
  return {
     type: ADD_NEW, 
     data //is equavalent to data: data (ES6)
  } 
} 

然后在reducer中动态更新对象

    case ADD_NEW: 
      return { 
        ...state, 
        //here choose the property to be updated dynamically
        //replace Low: action.data with below line
        [action.data.addtype]: action.data.addData, 
        error: false, 
      } 

**注意这里[action.data.addtype]: action.data.addData 我们在 ES6 中使用计算属性名称。