Question

我对React ans并不陌生，当时正在学习Context API，在使用它的过程中遇到了TypeError错误：render不是一个函数。我还在平台中找到了这个答案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;

Answer 1

您的进出口声明有问题。

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

修正您的出口声明，然后修正您的进口。导入文件Context.Consumer中的Track，并导入文件Context.Provider中的App

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;

遇到TypeError：使用Context API时render不是函数

1 个答案: