javascript - 运行此代码上下文API和Reactjs时出现Render not Function错误

Question

感谢您抽时间阅读。我已经在这里呆了几个小时了，除了现在，我几乎正确了，我正在使用Context API和Reactjs遇到“TypeError:render不是一个函数”错误，无法弄清楚，请帮助

我改变了州和 Prop 的位置，再次回到这是我得到的最接近的效果

这是我的父文件，我通过了UserProvider

import React, { Component } from "react";
import Group from "./Groups";
import JsonData from "../data/export";
import { UserProvider } from "./context/UserContext";

class GroupGrid extends Component {
    render() {
        // console.log(JsonData);
        return (
            <UserProvider value={JsonData}>
                <div className='cards'>
                    <Group />
                </div>
            </UserProvider>
        );
    }
}

export default GroupGrid;

这是子文件

import React, { Component } from "react";
import UserContext from "../components/context/UserContext";
import { UserConsumer } from "../components/context/UserContext";

class GroupDetails extends Component {
    static contextType = UserContext;

    componentDidMount() {
        const data = this.context;
        //  console.log(data); // { name: 'Tania', loggedIn: true }
    }

    render() {
        return (
            <UserConsumer>
                {this.context.TransportGrid.GROUPS.map((value, index) => (
                    <div key={value.GROUP_ID} className='GroupDetail'>
                        <div className='groupRow1'>
                            <span className='Date_label'>Date:</span>
                            <span className='GroupDate'>
                                {value.GROUP_DATE}
                            </span>

                            <span className='Group_label'>Group No:</span>
                            <span className='GroupID'>{value.GROUP_ID}</span>
                        </div>
                        <div className='groupRow2'>
                            <span className='Driver_label'>Driver:</span>
                            <span className='DriverName'>
                                {value.DRIVER_NAME}
                            </span>

                            <span className='Reg_label'>Artic:</span>
                            <span className='VehcileReg'>
                                {value.VEHICLE_REG}
                            </span>
                        </div>
                    </div>
                ))}
            </UserConsumer>
        );
    }
}

export default GroupDetails;

这是它查看的JSON的示例

{
    "TransportGrid": {
        "GROUPS": [
            {
                "GROUP_ID": "1234",
                "GROUP_DATE": "20/08/2019",
                "DRIVER_ID": "22",
                "DRIVER_NAME": "JIMMY BLOGGS",
                "VEHICLE_REG": "XSRFDFDDF",
                "START_COUNTRY": "COUNTRY1",
                "END_COUNTRY": "COUNRTY2",
                "MOVEMENTS": [
                    {

这样重复了180次，但任何人都没有主意吗？

提前致谢

Answer 1

问题是上下文API的使用者只需要一个子元素作为函数，而将JSX元素数组作为子元素。

另外，由于您使用的是最新的上下文API，因此不需要使用Consumer组件，您只需将代码编写为

class GroupDetails extends Component {
    static contextType = UserContext;

    componentDidMount() {
        const data = this.context;
        //  console.log(data); // { name: 'Tania', loggedIn: true }
    }

    render() {
        return (
            <React.Fragment>
                {this.context.TransportGrid.GROUPS.map((value, index) => (
                    <div key={value.GROUP_ID} className='GroupDetail'>
                        <div className='groupRow1'>
                            <span className='Date_label'>Date:</span>
                            <span className='GroupDate'>
                                {value.GROUP_DATE}
                            </span>

                            <span className='Group_label'>Group No:</span>
                            <span className='GroupID'>{value.GROUP_ID}</span>
                        </div>
                        <div className='groupRow2'>
                            <span className='Driver_label'>Driver:</span>
                            <span className='DriverName'>
                                {value.DRIVER_NAME}
                            </span>

                            <span className='Reg_label'>Artic:</span>
                            <span className='VehcileReg'>
                                {value.VEHICLE_REG}
                            </span>
                        </div>
                    </div>
                ))}
            </React.Fragment>
        );
    }
}

export default GroupDetails;