Next.js Discord

Discord Forum

Issue with useState

Unanswered
Scale parasitoid posted this in #help-forum
Open in Discord
Scale parasitoidOP
Hi there I have a little issue concerning a react state :
const [filterDate, setFilterDate] = useState({
    date_from: currentDate,
    date_to: currentDate,
  });

...
const handleExportData = () => {
    setIsSubscribed(true);
    
    exportData(
      EXPORT_REPORT,
      filterDate,
      filterTime,
      filterEmployee,
    ).then( result => {
        const url = URL.createObjectURL(result.data);
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', `report-${filterDate.date_from}-${filterDate.date_to}.xlsx`);
        document.body.appendChild(link);
        link.click();
        link.remove();
      }
    ).catch(console.error);
    return () => setIsSubscribed(false);
  }

Even if the filterDate is changed in the app, the filterDate inside handleExportData didn't change, it's still on the initialValue of the filterState

7 Replies

that occurence is known as closure
@aardani pass the `filterDate` as a props instead
Scale parasitoidOP
Still not working I have a weird bug, don't know why even when using callback with a string Filter, the changes not handle
const [filterDate, setFilterDate] = useState({
    date_from: currentDate,
    date_to: currentDate,
  });
  const [filterTime, setFilterTime] = useState({
    time_start: "00:00",
    time_end: "23:59",
  });
  const [filterEmployee, setFilterEmployee] = useState("");
  let EXPORT_REPORT = "report/exportreportbysections"

  const handleExportData = useCallback((filterDate: any,filterTime: any,filterEmployee: any) => {
    console.log(filterEmployee);
    exportData(
      EXPORT_REPORT,
      filterDate,
      filterTime,
      filterEmployee,
    ).then( result => {
        const url = URL.createObjectURL(result.data);
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute('download', `report-${filterDate.date_from}-${filterDate.date_to}.xlsx`);
        document.body.appendChild(link);
        link.click();
        link.remove();
      }
    ).catch(console.error);
  }, [filterDate,filterTime,filterEmployee]);
Even when changing filterEmployee which is just a string, the ui got the changes but not the handleExportData function
I removed the useCallback and still nothing
<TableWrapper
        columns={columns}
        data={filtredData}
        initial_visible_columns={initial_visible_columns}
        onViewDetailsClick={(el) => onViewDetailsClick(el)}
        withSearch
        withComparaison
        withExport={() => handleExportData(filterDate, filterTime, filterEmployee)}
      />

I think I'm having this behavior cause I'm passing the function as a prop?