Question 268869 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to set state after get value from function?

May i know how to set state value after get value from function?

const getValueFunction = () => {
    dispatch(fetchData(setData, 1, pages.current, rowsNumber));
  }

useEffect(() => {
    pages.current = 1;
    getValueFunction();
    const obj = data.reduce((r, { setCode }) => {
      const l = setCode[0];
      if (!r[l]) r[l] = [setCode];
      else r[l].push(setCode);
      return r;
    }, {});

    const sorted = Object.entries(obj).sort(([a], [b]) => a.localeCompare(b));
    
    setOrderList(sorted);
    
    console.log("69========"+JSON.stringify(orderList));

  }, []);

When I tried to print out "orderList" for first load, it will return empty.

useEffect(() => {
    pages.current = 1;
    getValueFunction();
    const obj = data.reduce((r, { setCode }) => {
      const l = setCode[0];
      if (!r[l]) r[l] = [setCode];
      else r[l].push(setCode);
      return r;
    }, {});

    const sorted = Object.entries(obj).sort(([a], [b]) => a.localeCompare(b));
    
    setOrderList(sorted);
    
    console.log("69========"+JSON.stringify(orderList));

  }, [orderList]);

If I put orderlist in [], then it will keep loading non stop.

Please help, thank you.

Tags:

2

Answers


  1. 0

    As far as I understood your question and assuming that the variable data is the data that is populated through fetchData(), the solution is to synchronise your calculation based on data:

    const getValueFunction = () => {
    dispatch(fetchData(setData, 1, pages.current, rowsNumber));
}

useEffect(() => {
    pages.current = 1;
    getValueFunction();
}, []);

useEffect(() => {
    // Assuming data can be null or an array
    if (!data || !data?.length) {
      return;
    }

    const obj = data.reduce((r, { setCode }) => {
      const l = setCode[0];
      if (!r[l]) r[l] = [setCode];
      else r[l].push(setCode);
      return r;
    }, {});

    const sorted = Object.entries(obj).sort(([a], [b]) => a.localeCompare(b));
    
    setOrderList(sorted);
}, [data]);
    Login or Signup to reply.
  2. 0

    You need to split up the effect that wants to run once, fetching the initial data, from the effect that wants to run each time data changes. I’m assuming that nothing else is setting orderList. If that’s not the case @ray’s answer suits better

    const getValueFunction = () => {
    dispatch(fetchData(setData, 1, pages.current, rowsNumber));
}

useEffect(() => {
    pages.current = 1;
    getValueFunction();
}, []);

const orderList = useMemo(() => {
    if (!data) return [];

    const obj = data.reduce((r, { setCode }) => {
      const l = setCode[0];
      if (!r[l]) r[l] = [setCode];
      else r[l].push(setCode);
      return r;
    }, {});

    return Object.entries(obj).sort(([a], [b]) => a.localeCompare(b));
}, [data]);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search