終極版減速器不改變商店的狀態正確

我建立一個小的應用採取的寵物，有一個形式，從收養列表中添加和刪除寵物。終極版減速器不改變商店的狀態正確

創建形式

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

終極版減速器不改變商店的狀態正確

回答

相關問題