终极版减速器不改变商店的状态正确

我建立一个小的应用采取的宠物，有一个形式，从收养列表中添加和删除宠物。终极版减速器不改变商店的状态正确

创建形式

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: '' }推送到所选类别的宠物数组来完成的。

问题是，当我尝试添加的宠物不止一次。

当第一次添加宠物时，它会创建一个空表格，其中breed和name具有空字段。现在，如果添加新宠物，表单将包含之前添加的字段的相同name和breed字段。不想要的行为的

例如：

1）形式被加载来自API作为占位数据。 [预计]

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

3）用户写入新创建的表单上的宠物的名字和品种并点击AddPet组件。 [预期]

4）相同name和breed一种新形式如在步骤3）。 [意外]

东西与state[payload.keys].faqs.push({ breed: '', name '' })从减速器发生。

来源

2016-12-17 pbgnz

推不是一成不变的操作。你正在改变阵列本身。所以它具有相同的状态和以前的状态。

您必须创建前一个数组的副本，并将新项目推入此新副本。

例如：

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

来源

2016-12-17 19:52:55 Mayday

终极版减速器不改变商店的状态正确

回答

相关问题