嵌套路由在更新和删除函数后不重新呈现ParentComponent

Question

我正在使用带有父功能组件的Re-render。成功执行后，我的更新和删除功能在Redux中处理，不会重新呈现父功能组件

***This my Main component where i am getting clients from Api USing Redux it is working working
import React, { Fragment,useEffect } from 'react'
import {connect} from 'react-redux';
import {getClients,deleteClient} from '../Redux//actions/clientActions';
import {Spin,Table,Tag,Button} from 'antd';
import { Link } from 'react-router-dom';
import Moment from 'react-moment'
const Clients =({getClients,deleteClient,client:{clients,loading},history})=> {
useEffect(()=>{
getClients()
}
,[getClients]);

const columns = [
{
title:'Company',
dataIndex: 'companyName',
key: 'companyName',
render: text => <a>{text}</a>,
},
{
title: 'Type',
dataIndex: 'type',
key: 'type',
},
{
title: 'Price Type',
dataIndex: 'typePrice',
key: 'typePrice',
},
{
title: 'Partita Iva',
dataIndex: 'partitaIva',
key: 'partitaIva',
},
{
title: 'Codice Fiscale',
dataIndex: 'codiceFiscale',
key: 'codiceFiscale',
},
{
title: 'Name',
dataIndex: 'name',
key: '1',
},
{
title: 'SurName',
dataIndex: 'surname',
key: '2',
},
{
title: 'Address',
dataIndex: 'address',
key: '3',
},
{
title: 'City',
dataIndex: 'city',
key: '3',
},
{
title: 'Zip',
dataIndex: 'zip',
key: '4',
},
{
title: 'Country',
dataIndex: 'country',
key: '5',
},
{
title: 'Phone',
dataIndex: 'phone',
key: '6',
},
{
title: 'Email',
dataIndex: 'email',
key: '7',
},
{
title: 'Domains',
key: 'domains',
dataIndex: 'domains',
render: domains => (
<span>
{domains&&domains.map(domain => {
let color = domain.length > 5 ? 'geekblue' : 'green';
return (
<Tag color={color} key={domain}>
{domain.toUpperCase()}
</Tag>
);
})}
</span>
),
},
{
title: 'Notes',
dataIndex: 'notes',
key: 'notes',    
},
{
title: 'Creator Id',
dataIndex: 'createdByID',
key: 'createdByID',    
},
{
title: 'Date',
dataIndex: 'date',
key: 'date',
render:(text)=>(
<>
<Moment format='YYYY/MM/DD'>{text}</Moment>
</>
) 
},
{
title: '',
render:(record)=>(
<> 
<Button style={{
marginBottom:"5px"
}} type="primary" ghost>
<Link to={`/clients/update/${record._id}`}>Update</Link>
</Button>
<Button type="primary" style={{
marginBottom:"5px"
}}  ghost>
<Link to={`/clients/${record._id}`}>Detail</Link>
</Button>
</>
)
},

];
return loading && clients.length === 0 ? (
<div style={{
position:"absolute",
left:"50%",
top:"50%",
traverse: 'translate(-50%, -50%)'
}}>
<Spin/>
</div>
):
(
<Fragment>
<Table pagination={{ defaultPageSize: 4, pageSizeOptions: ['10', '20', '30']}} columns={columns} dataSource={clients}  scroll={{ x: 1300 }}/>
</Fragment>
)

}
const mapStateToProps = state =>{
return {
client:state.client
}
}

export default connect(mapStateToProps,{getClients,deleteClient})(Clients);

***这是我的详细信息页面，我正在执行删除功能，功能执行完美并转到主客户端，但删除后客户端不会在主页上更新

---

import React, { Fragment,useEffect,useState } from 'react'
import {connect} from 'react-redux';
import {withRouter,useParams,useHistory,Redirect} from 'react-router-dom';
import {getClient,deleteClient} from '../Redux/actions/clientActions'
import { Card,Spin,Button,Modal } from 'antd';
const gridStyle = {
width: '33%',
textAlign: 'center',
};
const ClientDetail =({client:{client},getClient,deleteClient,loading,history})=> {
let [visible,setVisible] = useState(false)
let {id} = useParams()
useEffect(()=>{
getClient(id)
},[getClient,id])

const handleDelete=()=>{
deleteClient(id)
setVisible(true)
}
const handleOk = () => {
setVisible(false)
history.push('/clients')
};


return loading  && client === null? (
<div style={{
position:"absolute",
left:"50%",
top:"50%",
traverse: 'translate(-50%, -50%)'
}}>
<Spin/>
</div>
): (
<Fragment>
<Modal
title="Confirmation Dailog"
visible={visible}
//   onOk={handleOk}
footer={[
<Button key="back" onClick={handleOk}>
OK
</Button>,
]}
>
<p>Client Has been Deleted Successfully...</p>
</Modal>
<Card style={{textAlign:"center",
marginTop:"2rem"
}} title="Client Detail">
<Card.Grid style={gridStyle}>CompanyName: {client&&client.companyName}</Card.Grid>
<Card.Grid  style={gridStyle}>Type:{client&&client.type}</Card.Grid>
<Card.Grid style={gridStyle}>PriceType:{client&&client.typePrice}</Card.Grid>
<Card.Grid style={gridStyle}>PartitaIva:{client&&client.partitaIva}</Card.Grid>
<Card.Grid style={gridStyle}>CodiceFiscale:{client&&client.codiceFiscale}</Card.Grid>
<Card.Grid style={gridStyle}>Name:{client&&client.name}</Card.Grid>
<Card.Grid style={gridStyle}>SurName:{client&&client.surname}</Card.Grid>
<Card.Grid style={gridStyle}>Address:{client&&client.address}</Card.Grid>
<Card.Grid style={gridStyle}>City:{client&&client.city}</Card.Grid>
<Card.Grid style={gridStyle}>Zip:{client&&client.zip}</Card.Grid>
<Card.Grid style={gridStyle}>Country:{client&&client.country}</Card.Grid>
<Card.Grid style={gridStyle}>Phone:{client&&client.phone}</Card.Grid>
<Card.Grid style={gridStyle}>Email:{client&&client.email}</Card.Grid>
<Card.Grid style={gridStyle}>Domains1:{client&&client.domains[0]}</Card.Grid>
<Card.Grid style={gridStyle}>Domains2:{client&&client.domains[1]}</Card.Grid>
<Card.Grid style={gridStyle}>Domains3:{client&&client.domains[2]}</Card.Grid>
<Card.Grid style={gridStyle}>Notes:{client&&client.notes}</Card.Grid>
<Card.Grid style={gridStyle}>CreatorID:{client&&client.createdByID}</Card.Grid>
<Button type="danger" onClick={handleDelete} style={{ width: '40%',marginTop:"1rem",marginBottom:"1rem"}}>Delete</Button>
</Card>
</Fragment>
)
}
const mapStateToProps=state=>({
client:state.client
})
export default connect(mapStateToProps,{getClient,deleteClient}) (withRouter(ClientDetail));

Answer 1

下面是一个button and OnClick的示例，您可以将其用于工作逻辑。我希望它能帮助你

...
const ExampleComponent = props => {
useEffect(()=>{
getClients()
}
,[getClients]);

const handleDelete = () => {
const {asyncDelete, id, history} = props;
asyncDelete({id, onSuccess: () => {
getClients();
// or history.push('/');
}
});
}

return(
<>
...
<button onClick={handleDelete}
...
</>
)
}
const mapDispatchToProps = dispatch => ({
asyncDelete: ({ id, onSuccess }) => dispatch(asyncDelete({ id, onSuccess }))
});
...

假设actions.js文件中的reudx-thunk和axios

...
export const asyncDelete = ({ id, onSuccess }) => {
return dispatch => {
...
axios
.delete(`/user/${id}`)
.then(response => {
...
onSuccess();
})
.catch(error => console.log(error));
};
};
...

我将向异步操作传递一个onSuccess()方法，当删除完成时，如果删除正确，该方法也将被执行，并且组件将再次更新。您也可以将此逻辑应用于嵌套路由，尽管它们中的一个可以是相同的逻辑有不同的方式。