更新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数组中添加该元素，而不是在中或高数组中。 谁能帮我这个 ？

Answer 1

问题出在减速器中，您只更新Low属性。 您需要检查哪些属性需要更新。 为此，您可以像这样将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 中使用计算属性名称。