refreshing react component after navigation doesn't work

Question

refreshing react component after navigation I wanted to refresh my component, which has a table . After navigating to that page but nothing happened since the useeffect doesn't work. Actually, there is a delete button ,once click on it it should remove some data and redirect to a component and refresh the component. CrudDemo function:

function CrudDemo(props) {
  const navigate=useNavigate();
  const location = useLocation();

//it runs for firsttime ,due to having second parameter as empthy array
  useEffect(()=>{
    debugger;
axios.get('http://localhost:60359/api/person/getpersons').then((res)=>{

 const ResponseData=res.data;

  setPersonList(ResponseData);

})
  },[])

    
 
  const [PersonList, setPersonList] = useState();
  const [ShouldRefresh, setShouldRefresh] = useState(false);

  return (
    <div className="app">
      <h2>All students <span role="img" aria-labelledby="love"></span>
</h2>
      <button type="button" className="btn btn-info"onClick={() => navigate('/SavePerson/')}>Add Person</button> 


      <table className="table" >
              <TableHeader></TableHeader>
              <tbody>
              {PersonList&&PersonList.map((student,i) => {
         return (
           
          <TableRow key={student.id} obj={student}></TableRow>
                

         );
      })}

</tbody>

            </table>

    </div>
  );
    }
export default CrudDemo;

and navigation code:

  navigate('/CrudDemo/');

and inside crudCompnent there is a TableRow component:

function TableRow(props) {

  return (
    <tr >
    <th>{props.obj.id}</th>
    <th>{props.obj.personName}</th>
    <th>
    { //Check if message failed
        (props.obj.city!=null&&props.obj.city.name.length >0)
          ? <div> {props.obj.city.name}  </div> 
          : <div> </div> 
      }
</th>
    <th>{props.obj.personPhoneNumber}</th>
    <th>
      <TableAction id={props.obj.id}></TableAction>
    </th>
        </tr>

  );
}

export default TableRow

and inside it there is a tableAction which responsible for redirect after delete action:

function TableAction(props) {
const navigate=useNavigate();


const handleClick = (e) => {
  axios.get('http://localhost:60359/api/person/DeletePerson/'+props.id).then((res)=>{
    
    const ResponseData=res.data;
    console.log('person deleted message :',ResponseData);
    navigate('/CrudDemo/');

   //navigate('/home');
   })
};



  return (
    <div>
<button type="button" className="btn btn-info"onClick={() => navigate('/PersonDetail/'+props.id,{state:{id:props.id}})}>Details</button> 
<button type="button" className="btn btn-danger"onClick={handleClick}>Delete</button> 
    </div>

); }

export default TableAction

to sum up ,there is a crudComponent which present data Table and inside it there is a tableRow component which responsible for showing each row and inside it there is a tableaction component which responsible for delete each row and redirect to crudComponent .Beside problem is that after redirection crudComponent isn't refreshed.

Please post the code containing the delete button. Is it another Component ? — Nice Books, Jun 14 '22 at 17:39
Is the `then` callback of your `axios` call getting called ? — Nice Books, Jun 15 '22 at 05:34
@NiceBooks yes. The problem is the component already mounted and after redirecting ,it doesn't mount again and it just call for first time. — Amir Kian, Jun 15 '22 at 05:40
Ok, so your component needs to listen to route changes. Check this : https://stackoverflow.com/questions/41911309/how-to-listen-to-route-changes-in-react-router-v4 — Nice Books, Jun 15 '22 at 06:01

score 0 · Accepted Answer · edited Jun 16 '22 at 11:39

I handle it this way.Added location.state as a dependency in useEffect and send a state to it.

 function CrudDemo(props) {
    const navigate=useNavigate();
    const location = useLocation();
    
    //it runs for firsttime ,due to having second parameter as empthy array
    useEffect(()=>{
       debugger;
       axios.get('http://localhost:60359/api/person/getpersons')
          .then((res)=>{
              const responseData=res.data;
              setPersonList(responseData);
          });
    },[location.state]);

and in another component:

   const handleClick = (e) => {
      axios.get('http://localhost:60359/api/person/DeletePerson/'+props.id)
         .then((res)=>{
             const ResponseData=res.data;
             console.log('person deleted message :',ResponseData);
             navigate('/CrudDemo/',{state:{refresh:true}});
             //navigate('/home');
         });
    };

refreshing react component after navigation doesn't work

1 Answers1