定義済みの状態を通過したときに私の小道具が定義されていないのはなぜですか？

Question

子コンポーネントにデータを渡そうとしていますが、未定義の小道具が引き続きあります。私は親コンポーネントの状態を設定するときに問題があるかもしれないと思う。私は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呼び出しが終了する前にrender関数を実行して、this.state.winksが最初に未定義になるようにします。

あなたはこの

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

ような何かを行うことができます