使用上下文 api 将数据从父级传递给子级和兄弟级子级

Question

我正在尝试使用上下文 api 在子组件中显示获取的数据。 但是我在浏览器上遇到以下错误

类型错误：渲染不是函数
上述错误发生在组件中：在 AppDataList (at App.js:32) in div (at App.js:30) in App (at src/index.js:7)

并低于警告

警告：上下文使用者呈现有多个子项，或者不是函数的子项。 上下文消费者期望作为函数的单个孩子。 如果您确实传递了一个函数，请确保它周围没有尾随或前导空格。

应用程序.js

import React, { Component } from "react";
import "./App.css";

import AppDataList from "./components/AppDataList";
export const AppContext = React.createContext();

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      appData: []
    };
  }

  fetchAppData() {
    fetch(` http://localhost:4000/AppDataList`)
      .then(res => res.json())
      .then(res => {
        console.log(res)
        this.setState({
          appData: res
        });
      });
  }
  componentDidMount() {
    this.fetchAppData();
  }
  render() {
    return (
      <div className="App">
        <AppContext.Provider>
          <AppDataList />
        </AppContext.Provider>
      </div>
    );
  }
}

应用数据列表.js

import React, { Component } from "react";
import { AppContext } from "../App";

export default class AppDataList extends Component {
  render() {
    return (
      <AppContext.Consumer>
        <div>{context => <p>{context.state}</p>}</div>
      </AppContext.Consumer>
    );
  }
}

我也想做类似的事情

<AppContext.Provider>
   <Child1 />
   <Child2 />
   <Child3 />
 </AppContext.Provider>

并在相应的子组件中使用数据。

Answer 1

您必须通过 Provider 中的 value 道具将要传递给 Consumers 的值放入：

<Context.Provider value={{ appData }}>

Answer 2

以下作品：

<AppContext.Consumer>
  {context => <p>{context.state}</p>}
</AppContext.Consumer>

消费者寻找功能，而不是组件。 ref： 在尝试使用 Context API 时看到“render is not a function”