useState() showing empty array always when page load and doesn't add the fetch data in second useState(), shows undefined

Question

When I run the useState it is running twice where the first time is giving the empty array[] and the second time is showing the fetch data.

const [configuration, setConfiguration] = useState([]);

useEffect(() => {
  getMailinfo();
}, []);
function getMailinfo() {
  axios
    .get(`${appLocalizer.apiUrl}/wcs/v1/wcs_mail_active`, {
      headers: {
        "content-type": "application/json",
        "X-WP-NONCE": appLocalizer.nonce,
      },
    })
    .then(function (response) {
      setConfiguration(response.data);
    });
}

console.log(configuration);

{
    "mailactive": true,
    "ownermail": "[email protected]",
    "username": "[email protected]",
    "password": "168463517FKJKT1EE13B4CE44B9A90",
    "host": "smtp.email.com"
}

It run twice; first [] empty array then the data

Now If I use my fetch data inside another useState its always shows undefined as useState getting empty array first time.

const [toggleState, setToggleState] = useState(configuration.ownermail);
console.log(toggleState); // undefined

return (
  <>
    <div>Documentation from react:- {configuration.ownermail}</div>
    <div>Second run:- {configuration.toggleState}</div>
  </>
);

Here 'Documentation from reacting:-' loading first then a after few seconds It shows "Documentation from reacting:- myvalue"

the second div shows nothing and the console its undefined.

My App.js

return (
  <div className="wcs_plug" id='wcs_plug_start'>
    <WCSTab /> {/* I have already removed the React.StrictMode */}
  </div>
);

Can anyone please help here ?? Thanks In advance;

So in short, When I run the useState it is running twice where the first time is giving the empty array[] and the second time is showing the fetch data. Now If I use my fetch data inside another useState it always shows undefined as useState getting an empty array the first time. I want my fetch date to send inside the second useState and also want to run the return only once with valid data. It should not delayed to show the fetch data

In that case you can use some initial data instead of an empty array or consider having a loading state till the data arrives which is the most common ones .... — KcH
– KcH, Commented Dec 9, 2022 at 2:13
Thanks for the response. As its an array and fetch data from the rest API, If I set any initial value then on page load It will show those initial data for a few second, and the most important thing the second useState not taking the fetch data, it return always undefined but then it will show only my initial value but not the actual value which I am getting from rest API.So my goal is not full fill. — SABBIR SAM
– SABBIR SAM, Commented Dec 9, 2022 at 2:28
"It run twice; first [] empty array then the data"... why is that a problem? Your state is an empty array on the first render, then the setConfiguration(response.data) triggers a re-render and it has your data in it. Use conditional rendering to show things only when you have data. — Phil
– Phil, Commented Dec 9, 2022 at 2:33
Does this answer your question? react useEffect hooks with axios cannot read property of undefined — Phil
– Phil, Commented Dec 9, 2022 at 2:35
You shouldn't be initialising a state variable from another. Your toggleState will never change. Use a memo hook if you want something derived from state... const toggleState = useMemo(() => configuration.ownerEmail, [configuration]) — Phil
– Phil, Commented Dec 9, 2022 at 3:31

SABBIR SAM · Accepted Answer · 2022-12-09 03:41:54Z

0

Thanks to @Phil, useMemo fixed my problem.

import React, {useState, useEffect, useMemo } from "react"

const toggleState = useMemo(() => configuration.ownermail, [configuration])

return (
    <>
    <div>Second run 0:- {toggleState}</div>
    <div>Second run 1:- {toggleState ? toggleState : "Loading.."}</div>
    <div>Second run 2:- {toggleState && toggleState}</div>
    </>
  )

Now all conditions are working

answered Dec 9, 2022 at 3:41

SABBIR SAM

95 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

useState() showing empty array always when page load and doesn't add the fetch data in second useState(), shows undefined

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related