面临类型错误：使用 Context API 时渲染不是函数

debugcn 发表于 Dev

狄更斯

我是 React 新手，正在学习 Context API，在使用它的过程中，我遇到了这个错误 TypeError: render is not a function。我还找到了这个答案React Context: TypeError: render is not a function in the platform which is close to my problem but no result. 这是我正在使用的代码：

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;

r3wt

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

首先你export class MyContext，那么你立即覆盖MyContext用Context.Consumer。

修复您的导出语句，然后修复您的导入。导入Context.Consumerin 文件Track，并导入Context.Providerin 文件App

容器/上下文/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};

跟踪.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;