Question

我的初始状态为

sites = [

{id, name, vehicles[], drivers[]},
{id, name, vehicles[], drivers[]},
{id, name, vehicles[], drivers[]},
{id, name, vehicles[], drivers[]},

];

当我从SiteVehcleSelection组件中的列表中选择车辆时，我试图将车辆添加到给定站点，并且处理选择的方法是：

 handleVehicleSelection = (event) => {
    const vehicle = this.props.vehicles.find((v) => v.id === parseInt(event.target.dataset.id, 10));
    this.props.handleVehicleSelection(event, this.state.site.id, {...vehicle});
  };

将其传递给父SiteList方法：

  handleVehicleSelection = (event, siteId, vehicle) => {
    this.props.dispatch(siteActions.handleVehicleSelect(siteId, vehicle), event.target.checked);

}

从SiteList类调用：

export function handleVehicleSelect(siteId, vehicle, cmd){
  return (dispatch) => {
    debugger;
    return fetch(`${BASE_URL}/accounts/site-vehicle-action/${siteId}/${vehicle.id}/${cmd}`, {
      method: 'PUT',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: ''
    }).then((res) => {
      return res.json();
    }).then((json) => {
      if (json.msg === true) {
        dispatch(vehicleSelect(siteId, vehicle));
      }
    });
  }
}

调度到此的

export function vehicleSelect(siteId, vehicle){
  return {type: actionTypes.ADD_VEHICLE_TO_SITE, siteId, vehicle};
}

我的减速器是：

 case actionTypes.ADD_VEHICLE_TO_SITE:
    debugger;
    const siteIndex = state.findIndex((site) => site.id === action.siteId);
    console.log(state);
     const newState = [...state.slice(0, siteIndex), {...state[siteIndex], vehicles: [...state[siteIndex].vehicles, action.vehicle],}, ...state.slice(siteIndex +1)];
     console.log(newState);
     return newState;

当我在进行更改之前和之后进行记录时，车辆已添加到正确的位置，但是在视图中它没有显示/刷新，这是在记录之前和之后的状态。

更改前：

0: {drivers: Array(0), id: 1, name: "Site One", vehicles: Array(0)}
1: {drivers: Array(0), id: 2, name: "Site Two", vehicles: Array(0)}
2: {drivers: Array(0), id: 3, name: "Site Three", vehicles: Array(0)}
length: 3
__proto__: Array(0)

更改后：

0: {drivers: Array(0), id: 1, name: "Site One", vehicles: Array(1)}
1: {drivers: Array(0), id: 2, name: "Site Two", vehicles: Array(0)}
2: {drivers: Array(0), id: 3, name: "Site Three", vehicles: Array(0)}
length: 3
__proto__: Array(0)

可以看到第一个车辆已正确添加车辆，这是新状态，但是返回时没有任何反应，好像sitesList没有刷新。

希望此修改有助于进一步说明。

Answer 1

让我们说这是您带有键的状态结构（我为键指定了随机名称，以便我可以解释）

{
  data:[{id:"some_id",name:"some_name",items1:[{},{}]}]
}
//suppose this is your reducer code.
case ADD_ITEM:
return{
 ...state,
 data: state.data.map(val=>{
   if(val.Id===action.payload.Id){
    return{
   ...val,
   items1:[...val.items1,action.payload.data]
   }
}
return{...val}
})
}

在这里，您将通过以下操作发送ID和数据：

{type:"ADD_ITEM",payload:{Id,data}}

其中id将是需要更新其数组的一级对象的ID，数据将是您要添加到数组中的数据。

Answer 2

我认为下面的代码会有所启发。我假设您有相应的索引。

let state = [
    { id: "id1", name: "name1", items: [{},{}] },
    { id: "id2", name: "name2", items: [{},{}] },
]

function reducer() {
    switch("Action") {
        case ADD_SITE: { // add new element to state
            return [
                ...state,
                payload.site,
            ]
        }

        case ADD_SITE_AT_INDEX: { // add new element to state at index: idx
            return [
                ...state.slice(0, idx),
                payload.newSite,
                ...state.slice(idx)
            ]
        }

        case ADD_ITEM: { // add new item to site with index: idx
            return [
                ...state.slice(0, idx),
                {
                    ...state[idx],
                    items: [
                        ...state[idx].items,
                        payload.newItem
                    ],
                },
                ...state.slice(idx+1)
            ]
        }

        case ADD_ITEM_AT_INDEX: { // add new item to site with index: idx, at item index: item_idx
            return [
                ...state.slice(0, idx),
                {
                    ...state[idx],
                    items: [
                        ...state[idx].items.slice(0, item_idx),
                        payload.newItem,
                        ...state[idx].items.slice(item_idx),
                    ],
                },
                ...state.slice(idx+1)
            ]
        }
    }
}

Answer 3

如果只想将对象添加到具有给定结构的数组中，则可以执行以下操作：

Structure
[
  { id, name, items1[{object},{object}]
]

复制现有状态，然后将新对象添加到数组的末尾。

return {
  ...state,
  items1: state.items1.concat(action.newObject),
};

或带有ES6传播

return {
  ...state,
  items1: [...state.items1, action.newObject],
};
// state: { id, name, items1: [{object},{object},{newObject}] }

将对象添加到嵌套数组

3 个答案: