ReactJS не является компонентом рендеринга

Question

Я взял это все из этого примера. Создание страницы входа в систему React

Так что я не могу взять кредит. Тем не менее, эта страница работает нормально. Я пытаюсь приспособить его к странице React Video Player.

Мой код выглядит следующим образом (фрагмент из сообщения Axios):

 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

У меня такое ощущение, что это связано с Context, но я недостаточно знаю о React или о том, как его отладить с помощью инструментов Chrome. Мой бэкэнд - Джанго. Я почти думаю вернуться к использованию Jquery, чтобы я мог, по крайней мере, заставить страницы работать, но хотел попытаться изучить React.

Любая помощь будет отличной. Приведенный выше код просто тестирует код, чтобы я мог получить некоторые функциональные возможности.

Answer 1

Код ошибки был следующим:

 AppContext={self.props.appContext}

Который был опечаткой к этому:

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

Answer 2

Обновление состояния путем возврата null, пустого массива [] или любого начального значения не приведет к повторной визуализации компонента. Вам нужно изменить значение состояния на что-то другое, и тогда будет перерисован только компонент.

Вы также можете позаботиться о из setState не будет повторно визуализировать компонент, когда хук shouldComponentUpdate вернет false.