Question

我正在尝试将搜索过滤器功能传递到搜索栏组件中。但是我一直收到此错误TypeError：无法读取未定义的属性“搜索” 搜索功能无法识别我的上下文文件在这里 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），并为此返回当前上下文值上下文。

您将react组件传递给useContext，这是从'../../src/context'默认导出的。

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

export { ProductProvider, ProductConsumer, ProductContext };

..

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

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

1 个答案: