javascript - 更新 NGRX/Redux 存储中数组中对象的属性不起作用

Question

在我的Reducer中，我试图更新字典集合中保存的数组中对象的属性，但它不起作用，我不明白为什么。我的状态的 results 属性是一个键/值对的字典，值是一个数组。

我尝试使用映射函数创建一个新数组，但我的结果和状态没有更新。这是我的代码:

 case LOAD_SUCCESS: {
      const form = (action as LoadSuccessAction).form;

      return {
         results: {
           ...state.results,
           ...state.results['FORMS'].map(item => 
             item.id === form .id
              ? {...item, 'categories': form.categories}
              : item)           
         },    
        loading: false,
        loaded: true
      };
    } 

我做错了什么？

Answer 1

这里:

...state.results['FORMS'].map(…),

您正在将更新项目(更新的 FORMS)的数组与状态的结果属性(对象 包含FORMS)。

如果项目的类别和 ID 是数字，则最终结果将如下所示(仅显示结果):

{
    '0': { categories: 15, id: 10 },
    '1': { categories: 7, id: 11 },
    FORMS: [ /* its original content before the update */ ],
}

相反，您应该将新状态的 FORMS 属性设置为更新后的数组:

return {
    // loaded, loading…
    results: {
        ...state.results,
        FORMS: state.results.FORMS.map(
            item => item.id === form.id ? {
                ...item,
                categories: form.categories,
            } : item,
        ),
    },
}