渲染時出現React Context錯誤

Question

我創建了一個學習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;

這是錯誤：updateContextConsumer 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 | 

你能幫幫我解決這個問題嗎？

Answer 1

ContextProvider需要一個名為value而不是user的prop

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

Context消費者也將子節點作為函數而不是div

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

Answer 2

我目前正在研究React-16.8.6並且有一個有趣的bug。 我不確定這是否是已知問題，但每當我在兩個字符'}'和'<'之間有空格時我都會遇到同樣的錯誤，因為你可以看到它是第30行。

在（1）移除空間或（2）完全形成新線之后，它被解決了。

雖然我很喜歡React，但它並不完美，我們可以讓它更好地結合在一起。