[英]React Context error on rendering
我创建了一个学习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 |
你能帮帮我解决这个问题吗?
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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.