title: React & Axios - Not receiving response data upon page refresh
body: <p>Working on a project here and ran into an issue. I haven't had this problem before but now I do for some reason.</p>
  <p>So I am making an GET request to ASOS API, but it is acting very strange. Some of these, such as <code>name</code> is received upon page refresh, but mainly the other things like information about the <code>brand</code> becomes undefined. Now, the brand is in another object inside of the API. But I have had other things at other parts of the page before that were also in objects. But I did not have any issue there.</p>
  <p>Here is how the API call looks like:
  <a href="https://i.stack.imgur.com/ccqXr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ccqXr.png" alt="enter image description here" /></a></p>
  <p>And here is my code for the API fetch:</p>
  <pre><code>const FetchAPI = (props) =&gt; {
    const [product, setProduct] = useState({});
    const [brand, setBrand] = useState({});
    const [price, setPrice] = useState({});
  
    const [params, setParams] = useState({
      id: &quot;23363645&quot;,
      lang: &quot;en-US&quot;,
      store: &quot;US&quot;,
      sizeSchema: &quot;US&quot;,
      currency: &quot;USD&quot;,
    });
  
    useEffect(() =&gt; {
      const options = {
        method: &quot;GET&quot;,
        url: &quot;https://asos2.p.rapidapi.com/products/v3/detail&quot;,
        params: params,
        headers: {
          &quot;x-rapidapi-key&quot;: &quot;&quot;,
          &quot;x-rapidapi-host&quot;: &quot;&quot;,
        },
      };
  
      axios
        .request(options)
        .then(function (response) {
          console.log(response.data);
          setProduct(response.data);
          setBrand(response.data.brand);
          setPrice(response.data.price.current);
        })
        .catch(function (error) {
          console.error(error);
        });
    }, []);
  
    return (
      &lt;div&gt;
        &lt;Product
          name={product.name}
          price={price.text}
          brand={brand.description.replace( /(&lt;([^&gt;]+)&gt;)/ig, '')}
        /&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  <p>I am sending the data over to <code>Product</code> which is the product page of the item I am requesting. But whenever I refresh the page, I get <code>TypeError: Cannot read property 'replace' of undefined</code>. I did remove replace, and it worked fine. And if I placed replace back into the <code>brand.description</code> and saved, still worked fine. But on the page refresh, it crashes.</p>
  <p>Is it perhaps trying to load my <code>return</code> before the <code>useEffect</code>? If so, how do I solve this?</p>