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

【问题标题】：How to access data from [[PromiseValue]] when using React hooks? [duplicate]使用 React 钩子时如何从 [[PromiseValue]] 访问数据？ [复制]
【发布时间】：2019-09-09 18:07:09
【问题描述】：

我正在尝试从我的 API 中获取数据并通过 Context 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;

我收到回复：

【问题讨论】：

另见blog.niftysnippets.org/2018/06/common-fetch-errors.html。围绕fetch、响应检查和json解析编写一个包装函数，然后在Promise.all中调用该函数。

标签： javascript reactjs next.js

【解决方案1】：

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

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

【讨论】：