Javascript 渲染时出现反应上下文错误

我创建了一个应用程序来学习ReactJS。不幸的是，当我尝试使用上下文时，在渲染时出现了1个错误，但我的应用程序编译得很好

这是我的代码：

import React, {Component} from 'react';

const LoginContext = React.createContext(null);

const user = {
    isLoggedIn: true,
    username: 'test',
};

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoggedIn: false,
            user: user,
        };
    }

    render() {
        return (
            <LoginContext.Provider user={this.state.user}>
                 <Welcome/>
            </LoginContext.Provider>
        );
        }
    }

class Welcome extends Component {
    render() {
        return (
            <div>
                <WelcomeText/>
            </div>
        );
    }
}

class WelcomeText extends Component {
    render() {
        return (
            <LoginContext.Consumer>
                <div>
                    {(user) => (<p>{user.username}</p>)}
                </div>
            </LoginContext.Consumer>
        );
    }
}

export default App;

---

你能帮我解决这个问题吗？

ContextProvider

需要一个名为

value

的道具，而不是

user

  <LoginContext.Provider value={this.state.user}>
        <Welcome/>
  </LoginContext.Provider>

此外，上下文使用者将子对象作为函数，而不是div

class WelcomeText extends Component {
    render() {
        return (
            <LoginContext.Consumer>
                  {(user) => (<div><p>{user.username}</p></div>)}
            </LoginContext.Consumer>
        );
    }
}

类WelcomeText扩展组件{
render（）{
返回(
{（用户）=>（{user.username}
）}
);
}
}

我目前正在开发React-16.8.6，有一个有趣的bug。

---

我不确定这是否是已知的问题，但每当我在两个字符“}”和“1”之间有空格时，我都会遇到相同的错误。在提供程序中，使用

value=

2。消费者必须直接包装功能；

必须在函数外部（或内部）：非常感谢Shubham Khatri！将“用户”更改为“值”帮助了很多人。如何传入值，但如何访问用户？它们是如何连接的？它不需要是道具。用户？为什么？not@SeanKPS，ContextProvider的实现是这样的：它接受一个值prop，然后将它接收到的任何内容传递给ContextConsumer。随机道具不会以相同的方式处理，所以这是从消费者访问的const用户？它是在提供者中定义的，并通过ConsumerWho中的变量名来解决。我不相信这是一个问题，但谢谢你。这个答案为我节省了数小时的调试时间

class WelcomeText extends Component {
    render() {
        return (
            <LoginContext.Consumer>
                  {(user) => (<div><p>{user.username}</p></div>)}
            </LoginContext.Consumer>
        );
    }
}