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

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() {&nbsp; const message = useContext(SummaryContext);&nbsp; return (&nbsp; &nbsp; <SummaryContext.Consumer>&nbsp; &nbsp; &nbsp; {(value) => (&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>{message}</h2>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; </SummaryContext.Consumer>&nbsp; );}此处value本身也提供了您希望显示的消息，因此您可以直接使用<h2>{value}</h2>一种方式，或者您也可以采用以前的方式将其分配给变量message并在模板内调用。

Answer 2

我将react和react-dom版本更新为 16.13.0 并删除了SummaryContext.Consumer如果您需要消费者 api 或无法升级反应版本，那么您应该将一个函数作为子函数传递给SummaryContext.Consumerimport 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>  );}