Обновление состояния в дочернем компоненте после асинхронного запроса API - Spotify API в React - PullRequest
Новая
       48

Обновление состояния в дочернем компоненте после асинхронного запроса API - Spotify API в React

0 голосов
/ 22 ноября 2018

Я разрабатываю генератор списков воспроизведения с помощью Spotify API.Я делаю рефакторинг своего кода в React, и меня немного смущает подъем состояния с помощью асинхронных вызовов.

В моем App component у меня есть функция login, которая аутентифицирует пользователя, а затем обновляет состояние с помощью информации о пользователе.Я передаю это через nav component компоненту кнопки, который выполняет функцию, а затем обновляет состояние с помощью пользовательской информации.Мне нужно использовать эту информацию о пользователе для повторной визуализации кнопки входа в качестве имени пользователя и фотографии. 

class App extends Component{

    //login function
    //loginUser(){}
    return(
        <NavBar loginClicked={this.loginUser} loggedIn={this.state.loggedIn} user={this.state.curUser ? this.state.curUser: undefined}/>
    )
}
class NavBar extends Component{
    render(){
        return (
            <nav>
            <div className="logo" aria-label="sign in">
              <h1><a href="index.html">Moment Music</a></h1>
            </div>
              <SignIn loginClicked = {this.props.loginClicked} user={this.props.user ? this.props.user: undefined} loggedIn = {this.props.loggedIn} />
        </nav>
        ); 
    }
}

class SignIn extends Component{
    componentWillReceiveProps(nextProps){
        console.log(nextProps);
        return this.setState({nextProps});
    }
    render(){
        console.log(this.state.user)
        return(
        <div className='top-right'>
            {this.state.loggedIn ?
           ( //<div className="logged-in" id='logged-in' aria-label="logged in">
                <div className="logged-in" id='profile-nav-bar'>
                    <img className = "profile-img" id='profile-img' src={this.state.user.profileImg}/>
                    <h2 id='profile-name'>{this.state.user.username}</h2>
                </div>)
            //</div>)
            :
            (<div onClick={this.props.loginClicked} className="sign-in" id="sign-in" aria-label="sign in">
                <a className="btn btn-primary">Log in with Spotify</a>
            </div>)
            }
        </div>
        )
    }
}

Я могу обновить состояние с помощью componentWillRecieveProps, но оно не передаетсяметод рендеринга SignIn.

Спасибо за вашу помощь заранее.

1 Ответ

0 голосов
/ 22 ноября 2018

Вы не должны устанавливать реквизиты как состояние в дочерних компонентах.Ваш компонент WillReceiveProps в SignIn не нужен.Если реквизиты компонента SignIn изменятся, будет выполнен метод рендеринга.Реагируйте на изменения состояния и реквизита, чтобы пересмотреть компоненты.В SingIn используйте this.props вместо this.state

Если вы используете метод loginClicked в дочернем компоненте и ссылаетесь на него в функции, вы должны вызывать ее в соответствующем контексте.Итак, лучшим подходом является использование функции стрелки: loginUser = () => { // your function here }

...