React中创建全局Context时提示'children'未定义的问题排查

你遇到的'children' is not defined错误，核心原因是你的AllContexts组件函数没有接收children参数。在React中，组件的子元素会通过组件函数的props对象中的children属性传递，直接在JSX中引用children变量会因为未定义而报错。

修复后的代码（两种方式任选其一） #

方式1：接收完整props对象，使用props.children #

import React, { useContext } from "react";

const allContexts = React.createContext();

export function AllContexts(props){
    var prueba = [{test: 'funciona'}]

    return (
        <allContexts.Provider value={prueba}>
            {props.children}
        </allContexts.Provider>
    )
}

方式2：解构props直接获取children（更简洁） #

import React, { useContext } from "react";

const allContexts = React.createContext();

export function AllContexts({ children }){
    var prueba = [{test: 'funciona'}]

    return (
        <allContexts.Provider value={prueba}>
            {children}
        </allContexts.Provider>
    )
}

说明 #

当你在App.js中使用<AllContexts>...</AllContexts>包裹其他组件时，包裹的内容会自动作为children传递给AllContexts组件，修复后就能正常渲染子元素并提供上下文了。

内容的提问来源于stack exchange，提问作者Damian Mansilla