Could not store data in state in react js

Question

I have a two data in cardTypeData :

0: {id: 226, obj: {…}, Slug: 'hello-0'
1: {id: 228, obj: {…}, Slug: 'hello-1'}

useEffect(() => {
      let newcard = [];
      console.log("cardTypeData= ",cardTypeData)
          if (cardTypeData) {
            cardTypeData.map((item) => {
              if(item.Slug){
              const requestUrl = `chartconfig/${item.Slug}/${
                searchQuery?.year
                  ? `?year=${searchQuery.year}${
                      searchQuery.month ? "&month=" + searchQuery.month : ""
                    }`
                  : ``
              }`;
              axiosRequest.get(requestUrl)
              .then((res) => {
                  newcard.push(res.data);
              })
              .catch(console.log('err'))
              // .catch((error)=>{
              //   console.log(error)
              // });
            }
            });
          }
          console.log('list', newcard)
          setCardData(newcard);
      }, [cardTypeData]);

the console output is shown in the figure, how to fix this issues.

here data is shown but i could not display it in html.

Please format your code and include render method as well.

Ammar
– Ammar

2021-09-14 16:49:04 +00:00
Commented Sep 14, 2021 at 16:49 — Ammar
– Ammar, Commented Sep 14, 2021 at 16:49

score 2 · Accepted Answer · 2021-10-20 06:36:08Z

Refactor, refactor, and refactor again. The above solutions overall work as expected, but could be written better. I hope you do not mind if I show you how it should look like.

function loadNewCards() {
  if (!cardTypeData) return

  cardTypeData.forEach(async (cardItem) => {
    if (!cardItem.Slug) return

    const searchParams = new URLSearchParams(searchQuery).toString()
    const requestUrl = `chartconfig/${cardItem.Slug}/${searchParams}`
    const response = await axios.get(requestUrl).catch(console.log)

    if (!response) return

    setCardData(prevCardData => [...prevCardData, response.data])
  })
}

useEffect(() => {
  loadNewCards()
}, [cardTypeData])

Firstly, please avoid nesting. It makes your code less readable. Try to use negation to avoid nested if / else statement.

if (!cardItem.Slug) return

would be better than

if (item.Slug) {
   const requestUrl = `chartconfig/${item.Slug}`

Secondly, please use URLSearchParams to build the query params. This class will handle your object that contains year and month. I think it is better to have

const searchParams = new URLSearchParams(searchQuery).toString()
const requestUrl = `chartconfig/${cardItem.Slug}/${searchParams}`

instead of

const requestUrl = `chartconfig/${item.Slug}/${
  searchQuery?.year
    ? `?year=${searchQuery.year}${
      searchQuery.month ? '&month=' + searchQuery.month : ''
    }`
    : ``
}`

Kritish Bhattarai · Accepted Answer · 2021-09-14 17:43:20Z

1

Network request is asynhcronous. Before newcard.push(res.data) runs, setCardData(newcard) is already executed with initialized value of newcard which is [ ], ...you can modify the code something similar as below to make it work

useEffect(() => {
      // let newcard = [];
      console.log("cardTypeData= ",cardTypeData)
          if (cardTypeData) {
            cardTypeData.map((item) => {
              if(item.Slug){
              const requestUrl = `chartconfig/${item.Slug}/${
                searchQuery?.year
                  ? `?year=${searchQuery.year}${
                      searchQuery.month ? "&month=" + searchQuery.month : ""
                    }`
                  : ``
              }`;
              axiosRequest.get(requestUrl)
              .then((res) => {
                   
                  ***** modified 👇*****
                  // newcard.push(res.data);
                  setCardData(prev => [...prev, res.data])
              })
              .catch(console.log('err'))
              // .catch((error)=>{
              //   console.log(error)
              // });
            }
            });
          }
          console.log('list', newcard)
          // setCardData(newcard);
      }, [cardTypeData]);

edited Sep 14, 2021 at 17:43

answered Sep 14, 2021 at 16:55

Kritish Bhattarai

1,68120 silver badges21 bronze badges

1 Comment

dream boy achyut Over a year ago

while going to next page from this page and returning back brings more data, i mean while comming back to this page i am getting double data .

Domotor Zsolt · Accepted Answer · 2021-09-14 17:04:27Z

I've read somewhere that console.log doesn't always run the exact time you call it, sometimes it waits a bit especially when you expand the input.

The problem might be from the api calls from the cardTypeData.map.

Try using for instead to test it out. Also you will have to extract the async part because React doesn't like async useEffect..

Something like this:

const loadNewCards = async () => {
let newcard = [];
console.log("cardTypeData= ", cardTypeData);
if (cardTypeData) {
    for (let item of cardTypeData) {
  if (!item.Slug) {
    const requestUrl = `chartconfig/${item.Slug}/${
      searchQuery?.year
        ? `?year=${searchQuery.year}${
            searchQuery.month ? "&month=" + searchQuery.month : ""
          }`
        : ``
    }`;
    await axiosRequest
      .get(requestUrl)
      .then((res) => {
        newcard.push(res.data);
      })
      .catch(console.log("err"));
  }
}
}
console.log("list", newcard);
setCardData(newcard);
};
useEffect(() => {
    loadNewCards();
}, [cardTypeData]);

And if you worried about performance you should use Promise.all to run all the calls in parallel.

Collectives™ on Stack Overflow

Could not store data in state in react js

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related