将对象添加到嵌套 json 对象中的数组 - Redux答案

【问题标题】：Add object to array in nested json object - Redux将对象添加到嵌套 json 对象中的数组 - Redux
【发布时间】：2021-02-13 15:06:22
【问题描述】：

我很难将对象添加到 JSON 对象内的数组中。这是我的状态：

const DATA = 
{

 data: [

{
  id: 1,
  routeName: 'my 2 route',
  origin: 'Tel Aviv',
  destination: 'Netanya',
  date: '25-01-2021',
  km: '60',
  stops: [
    {
      id: 0,
      address: 'test',
      lat: '32.0853',
      lon: '34.7818',
      customerName: 'test',
      tel: '00000',
    },
    {
      id: 1,
      address: 'adddress',
      lat: '32.0853',
      lon: '34.7818',
      customerName: 'test',
      tel: '00000',

    }
  ],
},
{
  id: 2,
  routeName: 'my second route',
  origin: 'Holon',
  destination: 'Hadera',
  date: '12-02-2021',
  km: '70',
  stops: [
    {
      id: 0,
      address: 'address0',
      lat: '32.0853',
      lon: '34.7818',
      customerName: 'customer0',
      tel: '00000000',
    },
    {
      id: 1,
      address: 'address1',
      lat: '32.0853',
      lon: '34.7818',
      customerName: 'customer1',
      tel: '00000000',
    },
  ],
},


 ],
}

我不知道如何编写reducer，尝试了几种方法但状态没有改变。我的 reducer 获取路由 id + stop 以添加此路由。我会很高兴在这里得到一些帮助:)

【问题讨论】：

更多细节会有所帮助。我猜你是说你正在尝试向 stop 数组添加另一个对象？？？一般来说，你的 reducer 需要为一个新对象提供一个新数组，而不是改变现有的。
是的，这正是我想要做的。这里有什么细节？我最大的问题是我不知道如何将这个对象推送到这个数组。

标签： react-native redux react-redux

【解决方案1】：

您需要使用路线的id 找到父路线，然后您需要通过扩展创建一个新的stops 数组，并添加新站点。

您可以使用Array.findIndex() 查找实际路线，并对数组进行切片，并更新路线。但是，另一个简单的选择是映射data 的路由，并使用匹配的id 更新路由。

const routeReducer = (state, { type, payload: { routeId, stop } }) => {
  switch (type) {
    case 'ADD_STOP':
      return {
        ...state,
        data: state.data.map(route => route.id === routeId ? {
          ...route,
          stops: [...route.stops, stop]
        } : route)
      }
  }
}

通常在redux中最好normalize the state,，这样更容易更新单个项目。

【讨论】：

【解决方案2】：

你可以有一个 reducer 来做这样的事情：

const updateItemInArray = (array, itemId, updateItemCallback) => {
    return array.map(item => {

        if (item.id !== itemId) return item;

        // Use the provided callback to create an updated item
        return updateItemCallback(item);
    });
};

const data = (state = [], action) => {
    switch (action.type) {
        case 'ADD_STOP_SUCCESS':
            return updateItemInArray(state, action.payload.routeId, (item) => ({...item, stops: [...item.stops, action.payload.stop]}))
        default: return state;
    }
}

当调用 action.type 'ADD_STOP_SUCCESS' 时，动作的有效负载将包含您要添加到状态的新停止对象。

【讨论】：