渲染时反应上下文错误答案

【问题标题】：React Context error on rendering渲染时反应上下文错误
【发布时间】：2018-12-26 04:31:51
【问题描述】：

我创建了一个应用程序来学习 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;

这是错误：更新上下文消费者 http://localhost:3000/static/js/bundle.js:20927:23

  20924 | {
  20925 |   ReactCurrentOwner.current = workInProgress;
  20926 |   ReactDebugCurrentFiber.setCurrentPhase('render');
> 20927 |   newChildren = render(newValue);
        |                 ^  20928 |           ReactDebugCurrentFiber.setCurrentPhase(null);
  20929 | } // React DevTools reads this flag.
  20930 |

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

【问题讨论】：

1.在提供者中，使用value= 2.消费者必须直接包装函数； <div> 必须在函数外部（或函数内部）：codesandbox.io/s/7m24ry4vqj

标签： javascript reactjs react-context

【解决方案1】：

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

【讨论】：

非常感谢 Shubham Khatri！将用户转变为价值有很大帮助
如何传递值，但访问用户？它们是如何连接的？它不需要是 props.user 吗？为什么不
@SeanKPS，ContextProvider 的实现是这样的，它接受一个 value prop，然后将接收到的任何内容传递给 ContextConsumer。随机道具不会被以同样的方式处理
所以这是从消费者访问的 const 用户？它在提供者中定义，并由消费者中的变量名称寻址

【解决方案2】：

我目前正在研究 React-16.8.6，并且遇到了一个有趣的错误。我不确定这是否是已知问题，但每当我在两个字符 '}' 和 '

在 (1) 删除空格或 (2) 用完全换行后，问题已解决。

尽管我非常喜欢 React，但它并不完美，我们可以一起让它变得更好。

【讨论】：

哇，我不敢相信这是个问题，但感谢这个答案为我节省了数小时的调试时间