Asyncは、componentWillMountが反応する前にレンダリングトリガーを作成しますか？

Question

私は表示したいドロップダウンに問題があります。私のメインクラスはドロップダウンクラスを呼び出すと、コンポーネントウェイマウント（）がフェッチを開始しますが、フェッチがその情報を取得している間にrender（）が開始し、結果がまだフェッチされていないのでinfoがまだヌルであるためエラーが発生します。誰もがこれを解決する方法のアイデアを得た私の髪を別のアプローチでリッピングしています。

export class Dropdown extends React.Component{ 
    constructor() { 
     super(); 
     this.state = { 
      info: null 
     } 
    } 


    componentWillMount() { 
     fetch("http://localhost:8081/getUsers") 
      .then(res => res.json()) 
      .then(info => { 
      this.setState({info}) 
      console.log(info['mta:getUsersResponse']['mta:users']); 
     }) 

    } 

    render(){ 

      const info = this.state.info; 

      console.log(info); 
      let menuItems = []; 
    for (var i = 0; i < info['mta:getUsersResponse']['mta:users'].length; i++) { 
     menuItems.push(<MenuItem eventKey="[i]">info['mta:getUsersResponse']['mta:users']['mta:FullName'][i]</MenuItem>); 
    } 

    return (
    <DropdownButton bsStyle="primary" title="Users" key="dropdown1" id="1"> 
     <MenuItem eventKey="1">Action</MenuItem> 
     {menuItems} 
    </DropdownButton> 
); 
    } 
} 

Answer 1

状態の更新は、それがドロップダウン

例を返しますときには、情報の値をチェックし、その場合はnull、nullを返すとは

render() { 
    if (!this.state.info) return null; 
    const info = this.state.info; 
    console.log(info); 
    let menuItems = []; 
    for (var i = 0; i < info['mta:getUsersResponse']['mta:users'].length; i++) { 
    menuItems.push(<MenuItem eventKey="[i]">info['mta:getUsersResponse']['mta:users']['mta:FullName'][i]</MenuItem>); 
    } 
    return (
    <DropdownButton bsStyle="primary" title="Users" key="dropdown1" id="1"> 
     <MenuItem eventKey="1">Action</MenuItem> 
     {menuItems} 
    </DropdownButton> 
); 
} 

Answer 2

することができます、それユーザーフレンドリーにするために、ドロップダウンの代わりにloading...テキストまたはアニメーションアイコンを表示：

render() { 
    const { info } = this.state.info; 
    if (!info) return(
    <div className="loader">Loading...</div> 
) 

    // the code below will execute when `info` is not null. 
    let menuItems = []; 
    for (var i = 0; i < info['mta:getUsersResponse']['mta:users'].length; i++) { 
    menuItems.push(<MenuItem eventKey={i}>{info['mta:getUsersResponse']['mta:users'][i]['mta:FullName']}</MenuItem>); 
    } 
    return (
    <DropdownButton bsStyle="primary" title="Users" key="dropdown1" id="1"> 
     <MenuItem eventKey="1">Action</MenuItem> 
     {menuItems} 
    </DropdownButton> 
); 
} 

しかし、私は無条件DropdownButtonをレンダリングし、成功応答でオプションを移入するよりよいことだと思う：データが正常にフェッチされるまで

render() { 
    let MenuItems = [] 
    const { info } = this.state.info 

    if (!info) { 
    MenuItems.push(<MenuItem>Loading...</MenuItem>) 
    } 
    else { 
    info['mta:getUsersResponse']['mta:users'].forEach((elem, i) => { 
     MenuItems.push(<MenuItem eventKey={i}>{elem['mta:FullName']}</MenuItem>) 
    }) 
    } 

    return (
    <DropdownButton bsStyle="primary" title="Users" key="dropdown1" id="1"> 
     {menuItems} 
    </DropdownButton> 
) 
}