更新 react redux 中的对象数组答案

【问题标题】：update the array of object in the react redux更新 react redux 中的对象数组
【发布时间】：2018-12-11 18:09:49
【问题描述】：

我是react-redux 的新手。

const initialState = {
    Low: [
        {
            id: 0,
            type: '',
            count: '',
            allowded: 6,
            level: 'EASY'
        }
    ],
    Medium: [
        {
            id: 0,
            type: '',
            count: '',
            allowded: 7,
            level: 'MEDIUM'
        }
    ],
    High: [
        {
            id: 0,
            type: '',
            count: '',
            allowded: 7,
            level: 'TOUGH'
        }
    ]
}

这是我的初始状态值。

之后，

onChange(event, tobeupdated, id, type, noc, data) {
   let newData = { ...this.props.data };
    if (newData) {
      let data = newData[type].map((object, index) => {
        if (object.id === id) {
          object[tobeupdated] = event.target.value;
          const tobeData = newData[type];
         this.props.updateLowLevel({tobeData, type}).then(() => {
            let criteria_filled = this.disableAddbutton({ ...this.props.data }, type);
            addedRow = `new${type}RowAdded`;
            this.setState({
              [addedRow]: criteria_filled ? true : false
            })
});
}

这样我正在更新对象值。然后替换整个对象。

return (dispatch) => {
    dispatch({
      type: QUIZ_DATA,
      data: tobeUpdated,
    });
    return Promise.resolve();
  }
}

在我的减速器中，

case QUIZ_DATA:
            return {
                ...state,
                [action.data.type]: [action.data.tobeData],
                error: false,
            }

现在，当我更改 type 时会发生什么，然后它将该对象数组作为子对象添加到前一个数组中。因此，它会根据您添加的数量添加。所以，因此我无法正确获得该渲染。

所以发生的事情是，低：

这种方式被添加。那么，我该怎么做呢？

谁能帮我看看这个？

【问题讨论】：

一次，尝试在 reducer 中创建一个局部变量，并使其类似于：case QUIZ_DATA: {let data; data = [...state]; data.data.type = action.data.tobeData; return data}
数据 = [...状态];这样做之后，数据并没有得到它不受保护的实际数据
能否请您发布完整的减速器代码？我的意思是从上到下。我想看看你一开始是如何处理状态的

标签： javascript reactjs redux react-redux

【解决方案1】：

试试这个作为reducer。它将 tobeData 的内容传播到一个数组中。

case QUIZ_DATA:
            return {
                ...state,
                [action.data.type]: [...action.data.tobeData], // the difference is here
                error: false,
            }

【讨论】：

在这里，要发送该对象，我必须使用 const newData = { ... this.props.data}
我不太了解你。你试过把它当作减速机吗？我认为它会产生你想要的数据结构。
我对差异添加了评论。你基本上把一个数组放在一个数组中。在我的解决方案中，数组被复制到使用扩展 (...) 运算符的数组中。
一件事是，为什么当我尝试重置它时初始状态值始终保持填充值而不是重置为初始状态
我想我回答了你的问题。如果你喜欢它，请接受它。如果您还有其他问题，请在单独的问题中添加，并在必要时添加更多代码。

【解决方案2】：

[action.data.type]: [...action.data.tobeData],

你通过action.data.tobeData(eg: [1,2,3])传递的数据就是数组本身。

所以当你使用[action.data.type]: [action.data.tobeData]时，这将创建数组[[1, 2, 3]]。

你可以使用[action.data.type]: [...action.data.tobeData]，这叫做传播操作符，它所做的基本上就是将element里面的所有action.data.tobeData复制并传播出去。

你可以参考这个文件 Spread syntax

【讨论】：