使用 React 钩子时如何从 [[PromiseValue]] 访问数据？

Question

我正在尝试从我的 API 获取数据并通过上下文 API 在不同的组件中使用它。

但是，当我收到回复时，它是在 Promise 之下的。[[PromiseValue]]。我将如何正确获取此数据以便我可以在我的组件中使用它？

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>
    );
}

尝试访问上下文中的数据时，我成功获得了响应，但是它在 [[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;

我收到回复：

Answer 1

来自 fetch 的响应的 .json() 函数是异步的，因此当您使用 setXXX(xxx.json()) 设置上下文状态时，您将其设置为承诺。

要在 promise 中访问已解析的值，请将其更改为 setXXX(await xxx.json())，您将能够从挂接到上下文的函数组件中访问您正在查找的数据数组。

使用 React 钩子时如何从 [[PromiseValue]] 访问数据？

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

javascript

reactjs

next.js