onClickでredux状態からアイテムを削除するにはどうすればよいのでしょうか。
let initialState = {
items: [
{
name: 'A',
age: 23
},
{
name: 'B',
age: 20
},
{
name: 'C',
age: 29
}
]
}
次に、コンポーネントにリストを使用してオブジェクトをレンダリングします。
const listItems = this.props.MyState.items.map((item) =>
<li key={item.name} onClick=event => this.props.deleteItem(event, item) >{item.name}</li>
);
次に、このアイテムをaction.payloadを使用してレデューサーに渡します
しかし、状態からアイテムを削除する方法がわかりません。
例：action.payload私が得たアイテムはonClick、ここでこれをどのように理解するのですか？
case DELETE_ITEM:
return { ...state, ? };
状態がであるarray of objectsと考えると、1つの解決策は、選択したアイテムをインデックスで削除することです。また、副作用につながるため、reduxで直接状態変更を行うことは避けてください。ある種の変更（削除、更新）を行う予定がある場合は、常に状態のディープクローンまたはコピーを作成するようにしてください。したがって、すべての基盤をカバーするには：
あなたの減速は、おそらくのようになります必要があります。
let initialState = {
items: [
{
name: 'A',
age: 23
},
{
name: 'B',
age: 20
},
{
name: 'C',
age: 29
}
]
}
const userReducer = (state = initialState, action) => {
switch(action.type){
case ADD_ITEM:
...
case DELETE_ITEM:
return {
...state,
items: state.items.filter((item, index) => index !== action.payload)
}
}
}
この場合、action.payloadアイテム全体ではなく、アイテムのインデックスになるようにを設定します。
したがって、アクション作成者は次のようになります。
export const deleteItem = (index) => {
dispatch({
type: DELETE_ITEM,
payload: index
})
}
そして今、私たちはあなたのマークアップを本当に単純化することができます。アクションクリエーターの引数を満たすために、indexパラメーターを.map()asで使用するだけです。
const listItems = this.props.MyState.items.map((item, index) =>
<li key={item.name} onClick={() => this.props.deleteItem(index)} >{item.name}</li>
);
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加