我从这个例子中拿走了这一切。 Creating a React Login Page
所以我不能相信。但是,此页面工作正常。我正试图改造它以推动React Video Player页面。
我的代码如下(来自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>
)
}
}
我的代码不会呈现VideoPlayer页面,而且该代码来自此github上的标准示例
我觉得它与Context有关但我对React知之甚少或者如何使用Chrome工具调试它。我的后端是Django。我几乎想回到使用Jquery,所以我可以让页面至少运行,但想尝试学习React。
任何帮助都会很棒。上面的代码只是测试代码,所以我可以得到一些功能。
答案 0 :(得分:0)
通过返回null
,空数组[]
或任何初始值来更新状态将不会重新呈现组件。您需要将状态值更改为其他值,然后才会重新呈现该组件。
当shouldComponentUpdate挂钩返回false时,take care的setState {}}也不会重新呈现该组件。
答案 1 :(得分:0)
违规代码如下:
AppContext={self.props.appContext}
这是一个错字:
videoPlayer.push(<Videoplayer appContext={self.props.appContext} parentContext={this} />)