如何更新对象数组中具有相同名称的所有键?

how to update all keys with the same name in a array of objects?

我正在使用 React 和 Redux,并希望将每个 'volume' 键值递减 0 到 20(均包含在内)之间的随机数,然后更新状态数组。

我的数组是这样的:

const arr = [
  {id: 1, volume: 100, isEmpty: false},
  {id: 2, volume: 100, isEmpty: false}
]

这是我的动作:

const decrementAction = () => {
    return {
        type : 'DECREMENT'
    }
}

我的reducer是这样的:

const containers = (state = arr, action) => {
  switch(action.type){
    case 'DECREMENT':
      const randomNumber = Math.floor(Math.random() * 20) + 0;
      const newArr = arr.map(item => {
        const newObj = {
          ...item,
          volume : item.volume - randomNumber
        }
        return newObj;
      });
      state = newArray
  }
};

我在 运行 我的代码时遇到了一些问题:

1 - 每个值都相同,而不是为每个对象获取随机值(已解决)

2 - 值既递增又递减,而不是仅递减

请问我做错了什么?

谢谢

考虑在你的 reducer 中的 state = newArray 之后放置一个 break;,这至少应该可以解决你的第二个问题:

 const containers = (state = arr, action) => {
  switch(action.type){
    case 'DECREMENT':
      const randomNumber = Math.floor(Math.random() * 20) + 0;
      const newArr = arr.map(item => {
        const newObj = {
          ...item,
          volume : item.volume - randomNumber
        }
        return newObj;
      });
      state = newArray;
      break;
  }
};

Javascript 开关参考:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

首先,您只能获得一次随机数。你每次都需要一个新的随机数。

尝试 运行 整个循环,并像您当前所做的那样通过解构它们来继续添加项目。

const containers = (state = arr, action) => {
  switch(action.type){
    case 'DECREMENT':
      let newArr = [];
      for(let i = 0 ; i < arr.length; i++) {
      const randomNumber = Math.floor(Math.random() * 20) + 0;
       const newObj = {
          ...arr[i],
          volume : arr[i].volume - randomNumber
        };
      newArr.push(newObj);
      }
      return newArr;
      break;
   
   }
};

另外我相信使用 redux 你应该 return 状态。

我找到了解决方案...

而不是

const containers = (state = arr, action) => {
  switch(action.type){
    case 'DECREMENT':
      const randomNumber = Math.floor(Math.random() * 20) + 0;
      const newArr = arr.map(item => {
        const newObj = {
          ...item,
          volume : item.volume - randomNumber
        }
        return newObj;
      });
      state = newArray
  }
};

第 5 行我将状态称为 'arr',但我应该将状态称为 'state',如下所示。

const containers = (state = arr, action) => {
  switch(action.type){
    case 'DECREMENT':
      const randomNumber = Math.floor(Math.random() * 20) + 0;
      const newArr = state.map(item => {
        const newObj = {
          ...item,
          volume : item.volume - randomNumber
        }
        return newObj;
      });
      state = newArray
  }
};