ReactJS 不是渲染组件答案

【问题标题】：ReactJS is no Rendering ComponentReactJS 不是渲染组件
【发布时间】：2018-05-04 17:55:10
【问题描述】：

我从这个例子中得到了这一切。 Creating a React Login Page

所以我不能接受任何功劳。但是，此页面工作正常。我正在尝试对其进行改造以推动 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>
  )
}

}

我的代码不会呈现 VideoPlayer 页面，该代码来自此 github 上的标准示例

ReactJS Video Player

我感觉它与 Context 有关，但我对 React 或如何使用 Chrome 工具调试它的了解不够。我的后端是 Django。我几乎正在考虑重新使用 Jquery，这样我至少可以让页面正常运行，但想尝试学习 React。

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

【问题讨论】：

可以分享一下render函数的代码吗？
刚刚编辑过。
您是否有一个路由设置为在 url 为 /videoplayer 时显示的路由器？当认证成功时会发生什么？网址是否更改为 /videoplayer？
我暂时取下了路由器。看来这与 setState 有关。 stackoverflow.com/questions/24718709/…

标签： javascript django reactjs axios

【解决方案1】：

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

当 shouldComponentUpdate 钩子返回 false 时，setState 中的 take care 也可能不会重新渲染组件。

【讨论】：

我不确定你在哪里看到的。该代码使登录页面数组为空，然后将 videoPlayer [] 设置为 videoPlayer。你能告诉我你指的是哪里吗？

【解决方案2】：

有问题的代码如下：

 AppContext={self.props.appContext}

这是一个错字：

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

【讨论】：