使用 React Context 更新 reducer 中的子数组

Question

我正在使用 React Context 进行一些过滤，但在选择过滤器时更新子数组值时遇到了一些困难。

我希望能够按用户在下拉列表中选择的最低价格进行过滤，然后我发送一个操作以将其存储在 reducers 状态，但是，当我尝试更新内部数组时(homes: []) 位于 developments 数组中（加载时填充了数据），我似乎清除了内部数组之外的现有数据？

简而言之，我需要能够维护现有的 developments 数组，并在 homes 数组中按价格过滤掉，我之前提供了示例代码的副本，如果我解释过请告诉我这个够了吧！

export const initialState = {
  priceRange: {
    min: null
  },
  developments: []
};


// Once populated on load, the developments array (in the initialState object) 
// will have a structure like this, 
// I want to be able to filter the developments by price which is found below

developments: [
  name: 'Foo',
  location: 'Bar',
  distance: 'xxx miles',
  homes: [
    {
      name: 'Foo',
      price: 100000
    },
    {
      name: 'Bar',
      price: 200000
    }
  ]
]

case 'MIN_PRICE':
  return {
    ...state,
    priceRange: {
      ...state.priceRange,
      min: action.payload
    },
    developments: [
      ...state.developments.map(development => {
      // Something here is causing it to break I believe?
        development.homes.filter(house => house.price < action.payload);
      })
    ]
  };

<Select onChange={event=>
  dropdownContext.dispatch({ type: 'MIN_PRICE' payload: event.value }) } />

Answer 1

您必须将房屋与其他房产分开，然后您可以应用过滤器并重建开发对象：

return = {
    ...state,
    priceRange: {
        ...state.priceRange,
        min: action.payload
    },
    developments: state.developments.map(({homes, ...other}) => {
        return {
            ...other, 
            homes: homes.filter(house => house.price < action.payload)
        }
    })
}

使用 React Context 更新 reducer 中的子数组

Updating child array in reducer using React Context

javascript

reducers

reactjs