Redux Reducer无法正确更改商店状态

Question

我正在构建一个用于收养宠物的小型应用程序，该应用程序具有在收养列表中添加和删除宠物的表格。

API

[
   {category: 'dog', pets: [{breed: 'chihuahua', name: 'bar' }, ....]},
   {category: 'cat', pets: [{breed: 'tobby', name: 'foo'}, ....]},
   ....
]

创建表格的功能

export default function petFieldset({
 petGroups, addPet, deletePet, deleteCategory,
 nameInputChange, breedInputChange, categoryInputChange
}) {

const categoryField = Object.keys(petGroups).map((keys) => (
    <Fieldset
        title={'Pet Category'}
        button={<Delete onClick={deleteCategory.bind(this, { keys })} />}
        key={keys}
    >
        <CategoryComponent
            petGroup={petGroups[keys]}
            deletePet={deletePet}
            categoryKey={keys}
            nameInputChange={nameInputChange}
            breedInputChange={breedInputChange}
            categoryInputChange={categoryInputChange}
        />
        <br />
        <AddPet onClick={addPet.bind(this, { keys })} />
    </Fieldset>
));

return (<div>{ categoryField }</div>);
}

我的减速器addPet看起来像这样

[ADD_PET]: (state, { payload }) => {
    state[payload.keys].pets.push({ breed: '', name '' });
    return { ...state };
},

AddPet组件是一个按钮，用于分派操作ADD_PET ，该操作创建一个新的表单字段，其输入name和breed在表单的底部。 这是通过将空的{ breed: '', name: '' }推入所选类别的pets数组来完成的。

问题是当我尝试多次添加宠物时。

第一次添加宠物时，它将创建一个带有breed和name且带有空字段的空表格。 现在，如果添加了新宠物，则表单将包含与以前添加的字段相同的name和breed字段。

有害行为的示例：

1）从占位符的API加载表单中的数据。 [预期]

2）用户单击AddPet按钮，该按钮将创建一个新的空表单，其name和breed不带占位符。 [预期]

3）用户在新创建的表单上写下宠物名称和品种，然后单击AddPet组件。 [预期]

4）具有与步骤3）中相同name和breed的新表格。 [意外]

state[payload.keys].faqs.push({ breed: '', name '' })的state[payload.keys].faqs.push({ breed: '', name '' })发生了一些事情。

Answer 1

推送不是一成不变的操作。 您正在更改数组本身。 因此它具有相同的状态和先前的状态。

您必须创建先前阵列的副本，然后将新项推入此新副本。

例如：

[ADD_PET]: (state, { payload }) => {
    let pets = [...state[payload.keys].pets];
    pets.push({ breed: '', name '' });
    return { ...state, payload.keys: pets };
},