为什么我的搜索功能没有通过？

Question

我正在尝试将搜索过滤器功能传递到我的搜索栏组件中。但我不断收到此错误 TypeError: Cannot read 属性 'search' of undefined 搜索功能无法识别我的上下文文件在这里 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 accepts a context object (the value returned from React.createContext) and returns the current context value for that context.

您将反应组件传递给 useContext，它是从“../../src/context”默认导出的。

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

export { ProductProvider, ProductConsumer, ProductContext };

..

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

为什么我的搜索功能没有通过？

Why is my search function not being passed?

reactjs

react-context

react-hooks