0

I have an issue that useEffect function call works as should until it face setState function.

useEffect(() => {
    transformVisitsRequests();
  }, []);

I even exaggerated a bit the code with Promise.resolve() but I wanted to make sure that each line is updated with fully calculated data.

const transformVisitsRequests = async () => {
    await visit.loadVisits({ page: 1 });

    const visitsData = toJS(visit.visits);
    console.log('visitsData', visitsData);

    const data = visitsData?.filter((singleVisit) => singleVisit.visitRequest.status === 'PAID');
    console.log('data', data);

    await Promise.resolve();
    setPaidVisits(data);

    await Promise.resolve();
    console.log('paidVisits', paidVisits);
  };

console.log(visitsData) and console.log(data) shows me properly calculated data, but console.log(paidVisits) show empty array, so state update is not called.

const [paidVisits, setPaidVisits] = useState<IVisit[] | undefined>([]);

Terminal don't throw me any error.

Can You please suggest how this issue should be solved and state will update as it should ?

thanks

marcinb1986
  • 708
  • 1
  • 11
  • 30
  • tldr; `paidVisits` will change its value in the next render cycle. It will never have the new value in the same function – Konrad Jul 11 '23 at 19:53

0 Answers0