useContext() 返回未定义的值 -

Question

我有一个产品的上下文文件和状态文件。 当我尝试在产品组件中使用该上下文时，它返回未定义的值

productContext.js

import { createContext } from "react";

const ProductContext = createContext();

export default ProductContext;

ProductState.js

import ProductContext from './productContext';
import { useState } from 'react';

const ProductState = (props) => {
  const productsInitial = [
    {
      "_id": "63a4cc857f40d0063116be5f",
      "user": "63a4cbfd7f40d0063116be5d",
      "title": "Cassava",
      "description": "On-demand sand castle construction expertise.",
      "imgURL": "null",
      "price": "30",
      "__v": 0
    },
    {
      "_id": "63a4ccad7f40d0063116be69",
      "user": "63a4cbfd7f40d0063116be5d",
      "title": "Soyabeans",
      "description": "On-demand sand castle construction expertise.",
      "imgURL": "null",
      "price": "30",
      "__v": 0
    }
  ]
  const [products, setProducts] = useState(productsInitial);
  // console.log(products);

  return (
    <>

      <ProductContext.Provider value={{ products, setProducts }}>
        {props.children}
      </ProductContext.Provider>
    </>
  )
}


export default ProductState;

ProductComponent.js （反应组件）

import React, { useContext } from 'react';
import ProductContext from '../context/products/productContext';
import ProductItems from './ProductItems';

console.log(ProductContext);
const ProductComponent = () => {
    const context = useContext(ProductContext);
    const { products, setProducts } = context;
    return (
        <>
            <div className="col-lg-4 ">
                {products.map((product) => {
                    return <ProductItems product={products} />
                })}
            </div>
        </>
    )
}

export default ProductComponent;

线

const context = useContext(ProductContext);

在 Products.js 中，组件返回未定义值，因为 ProductContext 返回未定义

Answer 1

使用上下文的组件必须使用ProductState组件包装

如果您不知道在哪里添加ProductState ，您可以在您的入口点文件中添加。

root.render((
  <ProductState>
    <App />
  </ProductState>
))

您可以简化对象解构

const { products, setProducts } = useContext(ProductContext);

Answer 2

好的，所以我们必须给 createContext() 函数一个默认值，比如createContext(defaultValue)

所以我只是替换了const ProductContext = createContext(); 使用const ProductContext = React.createContext(productsInitial);

并在productContext.js中包含productInitials我将它与productState.js合并