score:4

Accepted answer

the dependency array you pass to useeffect() is empty, but you're using props. getinvoicedata() inside of it, so it's missing the props. add it like this:

  useeffect(() => {
    props.getinvoicedata();
  }, [props]);

better would be to deconstruct your props:

const tablesection = ({invoicedata , getinvoicedata}) =>{

  useeffect(() => {
   getinvoicedata();
  }, [getinvoicedata]);
  
  // use invoicedata here
  console.log(invoicedata);

dependencies are used to let useeffect() know if it should fire again or not. since your getinvoicedata is function, in this case it will only fire once, just like componentdidmount().

score:2

using react-redux hooks like useselector and usedispatch will minimize your work time, here your code with react-redux hooks:

import { getinvoicedata } from "../../actions/tables"
import {useselector ,usedispatch} from "react-redux"

const tablesection = (props) =>{
const {invoicedata} = useselector(state=>state.tables)
const dispatch = usedispatch()

  useeffect(() => {
   dispatch(getinvoicedata())
  }, []);


  const classes = usestyles();

return (<div>
{// here do something with invoicedata}
{invoicedata && invoicedata.map(...)}
</div>)
}
tablesection.proptypes = {
  invoicedata: proptypes.object
};

export default tablesection;

Related Query

More Query from same tag