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

Question

我正在使用React上下文进行一些过滤，并且在选择过滤器时很难更新孩子的数组值。

我希望能够按用户在下拉列表中选择的最低价格进行过滤，然后我发送一个操作以将其存储在减速器状态，但是，当我尝试更新内部数组（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)
        }
    })
}