ReactJS不是渲染组件

Question

我从这个例子中得到了这一切。创建 React 登录页面

所以我不能接受任何功劳。但是，此页面工作正常。我正在尝试将其改装为推送 React 视频播放器页面。

我的代码如下(来自Axios Post的片段(：

if (response.status == 200) {
console.log("Login successfull");
var videoPlayer = [];
this.setState( {isLoggedIn : true });
videoPlayer.push(<Videoplayer appContext={self.props.appContext} parentContext={this} />);
self.props.appContext.setState({loginPage: [], videoPlayer: videoPlayer});

现有的代码是这样的：

var uploadScreen=[];
uploadScreen.push(<UploadScreen appContext={self.props.appContext}/>);
self.props.appContext.setState({loginPage: [], uploadScreen: uploadScreen})
render() {
var browserHistory = createBrowserHistory();
if(this.state.isAuthenticated) {
return <Redirect to={'/VideoPlayer '}/>
}
return(
//<Router history={ browserHistory }>
//<Route path="/VideoPlayer" component={() => <VideoPlayer title="Arlo Video" style="home-header"/> }/>
<div>
<MuiThemeProvider>
<div>
<AppBar
title="Login"
/>
<TextField
hintText="Enter your Username"
id = "username"
floatingLabelText="Username"
onChange={(event, newValue) => this.setState({username: newValue})}
/>
<br/>
<TextField
type="password"
id = "password"
hintText="Enter your Password"
floatingLabelText="Password"
onChange={(event, newValue) => this.setState({password: newValue})}
/>
<br/>
<RaisedButton label="Submit" primary={true} style={style}
onClick={(event) => this.handleClick(event)}/>
</div>
</MuiThemeProvider>
</div>
// </Router>
)
}

}

我的代码没有呈现视频播放器页面，该代码来自此 github 的标准示例

反应JS视频播放器

我有一种感觉，它与上下文有关，但我对 React 或如何使用 Chrome 工具调试它知之甚少。我的后端是Django。我几乎在考虑回到使用 Jquery 上，这样我就可以让页面至少正常运行，但想尝试学习 React。

任何帮助都会很棒。上面的代码只是测试代码，所以我可以获得一些功能。

Answer 1

通过返回null、空数组[]或任何初始值来更新状态不会重新渲染组件。您需要将状态值更改为其他值，然后仅重新呈现组件。

你也可以注意 setState 不会重新渲染组件时 shouldComponentUpdate 钩子返回 false。

Answer 2

有问题的代码如下：

AppContext={self.props.appContext}

这是一个错字：

videoPlayer.push(<Videoplayer appContext={self.props.appContext} parentContext={this} />)