面对 TypeError：使用 Context API 时渲染不是函数答案

【问题标题】：Faced TypeError: render is not a function when using Context API面对 TypeError：使用 Context API 时渲染不是函数
【发布时间】：2019-09-24 15:44:41
【问题描述】：

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

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;

【问题讨论】：

你从不挂载上下文提供者，那么你为什么希望你的消费者工作呢？仅供参考，上下文仅在 Context.Provider 是 Context.Consumer 的父级时才有效。您需要将您的应用程序包装在上下文提供程序中。另外，请查看您的导出语句。您将MyContext 导出为命名导出，并将Context.Consumer 导出为MyContext（通过在导出语句中覆盖 MyContext 的值）作为默认导出。这里有各种各样的wtf发生
@r3wt，感谢老兄的关心和帮助。天哪，初学者太难了:)
没问题，相信我，我的第一次上下文之旅非常相似 :-) 很高兴它有所帮助
@r3wt，对不起，伙计只是想问你好心的建议。存在 Parent->Child 两级关系而不是 prop-drilling 时可以使用 Context API 吗？或者当有超过 3 级关系时，我们应该考虑使用 Context API 吗？谢谢：）
一般的经验法则是，如果超过 1 个兄弟姐妹需要访问 n 深度的某个父级的状态，那么我可能会使用上下文提供程序来避免道具钻探。有时这包括父组件的直接子组件，但通常嵌套如您所说 >=3 深。不过说实话，我过去避免使用上下文是自担风险的，所以现在我更渴望找到让它工作的方法，只是为了避免道具钻探和杂耍事件以及跨多个组件的状态的不可维护性

标签： javascript reactjs

【解决方案1】：

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

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

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

Containers/Context/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;

App.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;

【讨论】：