面临类型错误：使用上下文 API 时，渲染不是 function

Question

我是 React 的新手，正在学习 Context API，在使用它的过程中我遇到了这个错误 TypeError: render is not a function。 我还找到了这个答案React Context: TypeError: render is not a function in the platform 这与我的问题很接近，但没有结果。 这是我正在使用的代码：

import React, { Component } from "react";
import MyContext from "../../Containers/Context/Context";
class Track extends Component {
  render() {
    return (
      <MyContext>
        {value => {
          return <div>{value.heading}</div>;
        }}
      </MyContext>
    );
  }
}

export default Track;

---

import React, { Component } from "react";

const Context = React.createContext();

export class MyContext extends Component {
  state = { track_list: [], heading: "Top Ten Tracks" };
  render() {
    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

export default MyContext = Context.Consumer;

---

import React, { Component, Fragment } from "react";
import "./App.css";
import Header from "../src/Components/Header/Header";
import Search from "../src/Components/Search/Search";
import Tracks from "../src/Components/Tracks/Tracks";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import NotFound from "./Components/NotFound/NotFound";
import MyContext from "./Containers/Context/Context";

class App extends Component {
  render() {
    return (
      <MyContext>
        <Router>
          <Fragment>
            <Header />
            <div className="container">
              <Search />
              <Switch>
                <Route exact path="/" component={Tracks} />
                <Route component={NotFound} />
              </Switch>
            </div>
          </Fragment>
        </Router>
      </MyContext>
    );
  }
}

export default App;

Answer 1

您的导出和导入语句有问题。

首先你export class MyContext然后你立即用Context.Consumer覆盖MyContext 。

修复您的导出语句，然后修复您的导入。 在文件Track中导入Context.Consumer ，并在文件App中导入Context.Provider

容器/上下文/Context.js

import React, { Component } from "react";

const Context = React.createContext();

class MyContextProvider extends Component {
  state = { track_list: [], heading: "Top Ten Tracks" };
  render() {
    return (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    );
  }
}

const MyContextConsumer = Context.Consumer;

export {MyContextProvider,MyContextConsumer};

Track.js

import React, { Component } from "react";
import {MyContextConsumer} from "../../Containers/Context/Context";
class Track extends Component {
  render() {
    return (
      <MyContextConsumer>
        {value => {
          return <div>{value.heading}</div>;
        }}
      </MyContextConsumer>
    );
  }
}

export default Track;

应用程序.js

import React, { Component, Fragment } from "react";
import "./App.css";
import Header from "../src/Components/Header/Header";
import Search from "../src/Components/Search/Search";
import Tracks from "../src/Components/Tracks/Tracks";
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import NotFound from "./Components/NotFound/NotFound";
import {MyContextProvider} from "./Containers/Context/Context";

class App extends Component {
  render() {
    return (
      <MyContextProvider>
        <Router>
          <Fragment>
            <Header />
            <div className="container">
              <Search />
              <Switch>
                <Route exact path="/" component={Tracks} />
                <Route component={NotFound} />
              </Switch>
            </div>
          </Fragment>
        </Router>
      </MyContextProvider>
    );
  }
}

export default App;