为什么我的搜索函数没有被传递?

Question

我正在尝试将搜索过滤器函数传递到我的搜索栏组件中。但是我一直收到此错误类型错误：无法读取未定义的属性"搜索" 搜索功能无法识别，我的上下文文件在这里 https://github.com/CodingOni/Ecommerce-Store/blob/master/src/context.js

import React, { useContext, useEffect, useRef } from 'react';
import ProductContext from '../../src/context';
const ProductFilter = () => {
const productConsumer = useContext(ProductContext);
const text = useRef('');
const { search, searchResults } = productConsumer;
useEffect(() => {
console.log(` product context ${productConsumer}`)
});
const onChange = e => {
if (text.current.value !== '') {
search(e.target.value);
} else {
}
};
return (
<form>
<input
ref={text}
type="text"
placeholder="Search Keywords..."
onChange={onChange}
id=""
/>
</form>
);
};
export default ProductFilter;

Answer 1

useContext接受上下文对象(返回的值来自 React.createContext(并返回该 上下文。

您将反应组件传递给 useContext，这是从 '../../src/context'。

在上下文文件中，您需要导出 PoductContext

export { ProductProvider, ProductConsumer, ProductContext };

..

import {ProductContext} from '../../src/context';