Почему мои реквизиты не определены, когда я прошел через определенное состояние?

Question

Я пытаюсь передать данные дочернему компоненту, и я продолжаю получать неопределенную опору. Я думаю, что это может быть проблемой, когда Im устанавливает состояние в родительском компоненте. Должен ли я не использовать componentWillMount?

export default class AllItems extends Component { 
    constructor() { 
    super() 
    this.state=({ user: cookie.load('user')}) 
    this.httpHandler = axios.create({ 
     baseURL: 'http://localhost:3000/', 
     headers: { 
     'Authorization': this.state.user.token 
     } 
    }) 
    } 

    componentWillMount() { 
    this.httpHandler('/products/') 
    .then(function (response) { 
     this.setState({ winks: response.data.data}) 
     console.log(this.state.winks) 
    }.bind(this)) 
    } 
    render() { 
    return (

       <Winks products={this.state.winks} /> 

    ) 
    } 
} 

Answer 1

Проблема заключается в том, что ваше обещание не может вернуться до componentWillMount отделки и render называется. Так что products еще не существует. Вы могли бы сделать что-то вроде этого:

render() { 
    if (this.state.winks) { 
    return (<Winks products={this.state.winks} />) 
    } else { 
    return (<div>No Winks yet</div>); 
    } 
} 

Answer 2

проблема заключается в том, что у вас нет начального состояния для подмигивает Поскольку вы полагаетесь на вызов Ajax, чтобы установить состояние подмигивает, вызов Ajax будет происходить асинхронно и то он выполнит функцию рендеринга до завершения вызова api, в результате чего this.state.winks будет не определено вначале.

Вы могли бы сделать что-то вроде этого

render() { 
    let content = this.state.winks ? <Winks products={this.state.winks} /> : <div/> 
    return <div> {content} </div>