How to access data from [[PromiseValue]] when using React hooks?

Question

I'm trying to fetch data from my API and use it in different components via the Context API.

However, while I get a response back, it's under a Promise.[[PromiseValue]]. How would I correctly fetch this data so I can use it in my components?

import React,{useState, useEffect, createContext} from 'react';

export const ProductsContext = createContext();

export const ProductsProvider = props => {
    const [categories, setCategories] = useState({ categories: {} });
    const [products, setProducts] = useState({ products: {} });
    const [loading, setLoading] = useState(true);
    useEffect(() => {

        (async () => {
            const [categoriesResult, productsResult] = await Promise.all([fetch('/api/categories'), fetch('/api/products')]);
            setCategories(categoriesResult.json());
            setProducts(productsResult.json());
            setLoading(false);
          })(); 
        }, []);
    return (
        <ProductsContext.Provider value={ { products, categories, loading } }>
            {props.children}
        </ProductsContext.Provider>
    );
}

When trying to access the data within the context, I get the response successfully, however it's in a [[PromiseValue]]

import React from 'react';
import ProductsContainer from './Products/ProductsContainer';
import {ProductsProvider} from './Products/ProductsContext';
const Page = () => (

    <>
      <Header/>
      <Banner/>
      <ProductsProvider>
        <ProductsContainer/>
      </ProductsProvider>
    </>

);

export default Page;


import React, { useContext } from 'react';
import { ProductsContext } from './ProductsContext';


const Products = () => {
    const {products, categories, loading} = useContext(ProductsContext);
    return (
        <div className="products">
            {
                console.log(products)
            }
        </div>
    ); 
};

export default Products;

I get the response:

See also http://blog.niftysnippets.org/2018/06/common-fetch-errors.html. Write a wrapper function around `fetch`, response checking, and the json parsing, then call that function in the `Promise.all`. — Bergi, Sep 09 '19 at 19:49

score 0 · Accepted Answer · answered Sep 09 '19 at 18:10

The .json() function for responses coming out of fetch is asynchronous, so when you setting your context state with setXXX(xxx.json()) you're setting it to a promise.

To access the resolved value within the promise, change it to setXXX(await xxx.json()) and you'll be able to access to array of data you're looking for from within your function component that's hooked into the context.

How to access data from [[PromiseValue]] when using React hooks?

1 Answers1