How to update state variable in multiple api fetch?

Viewed 15

I am trying to update state variable between multiple API call but problem I am facing is variable stores only last updated value not all the value.

  const [dataSet, setDataSet] = useState({});
  const onDataSetChange = () => {

    console.log(dataSet)
  };
  useEffect(onDataSetChange, [dataSet]);

  const initializeData = () => {
    getData();
  };
  useEffect(initializeData, []);

  const getData = () => {
    dispatch(
      fetchData("123", (response) => {
        response.data.forEach((dataItem) => {
          getDataDetail(dataItem);
        });
      })
    );
  };

  const getDataDetail = (dataItem) => {
    dispatch(
      fetchDataDetail(dataItem.id, (response) => {
        const modifiedDataSet = { ...dataSet };

        modifiedDataSet[dataItem.id] = {
          label: dataItem.name,
          data: response.data,
        };
        setDataSet(modifiedDataSet);
      })
    );
  };

In console log I am getting

{}
{"data1":{label:"dataItem1",data:{}}
{"data2":{label:"dataItem2",data:{}}

And what I am expecting is

{}
{"data1":{label:"dataItem1",data:{}}
{
 "data1":{label:"dataItem1",data:{}
 "data2":{label:"dataItem2",data:{}
}
0 Answers
Related