反应错误：元素类型对命名导出无效

Question

我通过反应钩子和函数获得了住宅区的速度，并且我有三个文件。一个提供上下文SummaryContext，第二个是使用上下文的类组件WikiSummary，第三个是显示它Title。但是，我收到以下错误，并且尽管我一直在搞乱（仍在学习），但我无法弄清楚为什么会收到此错误。Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.Check the render method of `WikiSummary`.摘要上下文import React, { createContext } from 'react'export const SummaryContext = createContext(null);维基摘要import React, {Component} from "react";import {Title} from "./components/Title"import {SummaryContext} from "../../contexts/SummaryContext"import "../../App.css"class WikiSummary extends Component {render() {  return (    <>      <SummaryContext.Provider value = "hello from context">      <Title />      </SummaryContext.Provider>    </>  );}}export default WikiSummary;标题import React, {useContext} from "react"import {SummaryContext} from "../../../contexts/SummaryContext"export function Title(){  const message = useContext(SummaryContext)  return(    <div>      <h2>{message}</h2>    </div>  )}沙箱显示与沙箱中不同的错误https://codesandbox.io/s/react-context-example-forked-rly0d?file=/src/components/Title.js

Answer 1

它SummaryContext.Consumer使用渲染道具，特别是一个函数作为子组件，因此它期望它的直接子组件是一个函数。

这就是你得到错误的原因，

类型错误：渲染不是函数。（在'render（newValue）'中，'render'是Object的一个实例）

在您的情况下，您可以将 div 移动到函数内部，例如，

import React from "react";

import { useContext } from "react";

import { SummaryContext } from "./SummaryContext";

export function Title() {

  const message = useContext(SummaryContext);

  return (

    <SummaryContext.Consumer>

      {(value) => (

        <div>

          <h2>{message}</h2>

        </div>

      )}

    </SummaryContext.Consumer>

  );

}

此处value本身也提供了您希望显示的消息，因此您可以直接使用<h2>{value}</h2>一种方式，或者您也可以采用以前的方式将其分配给变量message并在模板内调用。

Answer 2

我将react和react-dom版本更新为 16.13.0 并删除了SummaryContext.Consumer

如果您需要消费者 api 或无法升级反应版本，那么您应该将一个函数作为子函数传递给SummaryContext.Consumer

import React from "react";

import { useContext } from "react";

import { SummaryContext } from "./SummaryContext";

export function Title() {

  return (

    <SummaryContext.Consumer>

      {(value) => (

        <div>

          <h2>{value}</h2>

        </div>

      )}

    </SummaryContext.Consumer>

  );

}