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

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

TypeError:渲染不是一个函数
组件中发生了上述错误： 在AppDataList中（位于App.js:32） 在div中（在App.js:30中） 应用程序内（位于src/index.js:7）

在警告之下

警告：呈现的上下文使用者包含多个子项，或 不是函数的子对象。上下文使用者需要一个孩子 这是一个函数。如果确实传递了函数，请确保没有 它周围的尾随或前导空格

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

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>
    );
  }
}

import React，{Component}来自“React”；
导入“/App.css”；
从“/components/AppDataList”导入AppDataList；
export const AppContext=React.createContext（）；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
appData:[]
};
}
fetchAppData（）{
获取（`http://localhost:4000/AppDataList`)
.then（res=>res.json（））
。然后（res=>{
console.log（res）
这是我的国家({
appData:res
});
});
}
componentDidMount（）{
this.fetchAppData（）；
}
render（）{
返回(
);
}
}

AppDataList.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>
    );
  }
}

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>
    );
  }
}

import React，{Component}来自“React”；
从“./App”导入{AppContext}；
导出默认类AppDataList扩展组件{
render（）{
返回(
{context=>{context.state}
}
);
}
}

我还想做一些类似的事情

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

---

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

您必须将要通过提供程序中的值属性传递给消费者的值：

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

---

您必须将希望通过价值道具传递给消费者的价值放入提供者中：

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

以下工作原理：

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

下面的工作原理：

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

tryed说“appData未定义”。tryed说“uncaughttypeerror:render不是函数”，因为您使用的是类组件，您的状态可以通过this.state访问，所以请尝试以下操作：value={{appData:this.state.appData}}，该值应该在render函数中作为value.appData访问，例如。{value=>/*根据上下文值渲染某些内容*/value.appData}我也尝试过这个方法，它会发出警告“index.js:1警告：一个上下文使用者渲染了多个子项”和错误“Uncaught TypeError:render不是一个函数”以及错误“index.js:1组件中发生了上述错误”。这与任何错误有关吗错误中提到的“type”？tryed说“appData未定义”。tryed说“uncaughttypeerror:render不是函数”，因为您使用的是类组件，您的状态可以通过this.state访问，所以请尝试以下操作：value={{{appData:this.state.appData}}，该值应该在render函数中作为value.appData访问，例如。{value=>/*根据上下文值渲染某些内容*/value.appData}我也尝试过，它会发出警告“index.js:1警告：上下文使用者被渲染了多个子项”和错误“Uncaught TypeError:render不是函数”以及错误“index.js:1组件中发生了上述错误”。这与任何错误有关吗键入错误中提到的“是吗？”？