代码之家 › 专栏 › 技术社区 › publicArt33

更新redux数组中的多个项

react-redux redux reactjs arrays

publicArt33 · 技术社区 · 6 年前

我正在尝试更新redux状态下的对象数组,

cars:  [
  {
    _id:"5b61b782719613486cdda7ec",
    car: "BMW",
    year: '2015'
   },
   {
      _id:"5b61b782719613486cdda7e1",
      car: "Toyota",
      year: '2015'
    },
    {
      _id:"5b61b782719613486cdda7e2",
      car: "Honda",
      year: '2015'
    },
    {
      _id:"5b61b782719613486cdda7e3",
      car: "Audi",
      year: '2015'
    }
 ]

action.payload数组

 action.payload :      
   [
    {
      _id:"5b61b782719613486cdda7ec",
      car: "BMW",
      year: '2019'
    },
    {
      _id:"5b61b782719613486cdda7e3",
      car: "Audi",
      year: '2019'
    }
  ]


case UPDATE_CARS:
  const updatedCars = state.cars.map((car) => {
  action.payload.forEach((newCars, index) => {
    if (car._id !== newCars._id) {
      //This is not the item we care about, keep it as is
      return car;
    } else {
      //Otherwise, this is the one we want to return an updated value
      return { ...car, ...newCars };
    }
  });
});

return {
  ...state,
  cars: updatedCars,
  loading: false
};

我做错什么了?有什么建议吗?

2 回复 | 直到 6 年前

devserkan 6 年前

另一种选择:

const updatedCars = state.cars.map( car => {
  const found = action.payload.find( el => el._id === car._id );
  return found ? found : car;
});

forEach return anything ,它只执行当前元素的给定函数。所以,在这种情况下 map 是你的朋友。

甚至还有一个更短更好的版本,@Luke M Willis在评论中提供:

const updatedCars =
    state.cars.map(car => action.payload.find(el => el._id === car._id) || car);

Arup Rakshit 6 年前

我把车过滤掉 state action.payload . 然后我将合并 ,并筛选 状态

case UPDATE_CARS:
  const updatedCarIds = action.payload.map(o => o.id);
  const notUpdatedCars = state.cars.filters(car => !updatedCarIds.includes(car.id))
  return [...notUpdatedCars, ...action.payload]

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

5 月前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

5 月前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

5 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

5 月前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

5 月前

noblerare · Vite错误-未定义导出(SSR)

5 月前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

5 月前