parent component
は、アイテムの取得と削除のアクションをディスパッチします。 子コンポーネントにはアイテムのリストが含まれ、削除ボタンが含まれています。ここで親から削除アクションの結果を受け取ったときに、子コンポーネントが更新されない
がイベント私の知る限り
**Retrieve Address List:**
Parent fetches list > Pass to Child > Display in Child <br> [ ->✓ Works well]
**Delete and Address**
Child invokes delete action > Action dispatched via parent > Result received in parent > Result sent to child via props > Child re-renders <br> [ -> ✘ Object is deleted in server but component desn't re-render]
の一連の私の計画だが、一連のイベントは、それを再描画するために強制的に最終的にはコンポーネントの状態を更新する必要があります。私は何が欠けていますか?
Parent Component
class Parent extends React.Component
{
componentWillMount()
{
store.dispatch(fetchShippingAddresses());
}
deleteAddress(address_id)
{
store.dispatch(deleteShippingAddress(address_id));
}
render()
{
let shippingAddresses = this.props.shippingAddressesList;
let deleteShippingAddressData = this.props.deleteShippingAddressData;
return (
<AddressList
shippingAddresses={shippingAddresses}
deleteAddresses ={(address_id) => this.deleteAddress(address_id)}
deleteShippingAddressData: this.props.deleteShippingAddressData
)
}
}
function mapStateToProps(state)
{
return {
shippingAddressesList : state.shippingAddressesList,
deleteShippingAddressData : state.deleteShippingAddressData
}
}
export default connect(mapStateToProps)(DashboardBody);
Child Component
class AddressList extends React.Component
{
constructor(props)
{
super(props);
this.state =
{
shippingAddresses: [],
deleteShippingAddressData: {}
}
}
componentWillReceiveProps(nextProps)
{
this.state.shippingAddresses !== nextProps.shippingAddresses &&
this.setState({ shippingAddresses: nextProps.shippingAddresses });
this.state.deleteShippingAddressData !== nextProps.deleteShippingAddressData &&
this.setState({ deleteShippingAddressData: nextProps.deleteShippingAddressData});
}
render()
{
addresses = this.state.shippingAddresses;
return (
<div >
{ addresses && addresses.data.map((address, i) =>
<p key={i}>
{address.address_name}
<button onClick={ event => this.props.deleteAddress(address.id) }>
Delete
</button>
</p>
)}
</div>
)
}
}
Delete Action
import axios from 'axios';
export function deleteShippingAddress(address_id)
{
return function(dispatch)
{
dispatch(destroyShippingAddressSuccess(false));
dispatch(destroyShippingAddressError(null));
const request = axios
({
url: `http://api.stagingapp.io/location/v1/shipping/address/${address_id}`,
method: "delete",
dataType: 'json',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'Authorization': 'Bearer ' + localStorage.getItem('access_token') }
})
.then(function(response)
{
destroyShippingAddressSuccess(response);
})
.catch(function(error)
{
dispatch(destroyShippingAddressError(error));
console.log(error)
});
return { type: 'DESTROY_SHIPPING_ADDRESS_SUCCESS', payload: request }
};
}
function destroyShippingAddressSuccess(deleteShippingAddressData)
{
return { type: 'DESTROY_SHIPPING_ADDRESS_SUCCESS', deleteShippingAddressData};
}
function destroyShippingAddressError(deleteShippingAddressError)
{
return { type: 'DESTROY_SHIPPING_ADDRESS_ERROR', deleteShippingAddressError };
}
export default deleteShippingAddress;
あなたの減速で
Deletion Reducer
export default function deleteShippingAddressReducer
(state = { deleteShippingAddressError:'', deleteShippingAddressData:'' }, action)
{
switch (action.type)
{
case 'DESTROY_SHIPPING_ADDRESS_SUCCESS':
return Object.assign({}, state, { deleteShippingAddressData: action.deleteShippingAddressData});
case 'DESTROY_SHIPPING_ADDRESS_ERROR':
return Object.assign({}, state, { deleteShippingAddressError: action.deleteShippingAddressError });
default: return state;
}
}
//
//
私はdeleteShippingAddressDetailsがアクションであると仮定します。その場合は、mapStateToPropsではなくmapDispatchToPropsに入れてください。 –
'AddressList.render'の' addresses'は何ですか? –
いいえ、deleteShippingAddressDetailsはリデューサにリストされている状態です。削除アクションの後にエラーまたは成功メッセージが表示されます。 – anonym