メニューのナビゲーションに問題があります。どのように動的メニューナビゲーションを渡すか反応するJS

Question

私たちは動的にAPIを介してメニューナビゲーションを取得しています。メニューナビゲーションを動的に渡す方法。

APIレスポンス。

http://jsoneditoronline.org/?id=7d4f2ddbabb7eba80dde69867989f0f3

ここ

コード。

componentDidMount() { 
    axios.get('http://****.com/****/api/products/navigation_menu?app_id=*******8') 
     .then(res => { 
     const ajaxresponse = res.data.result_set; 
     console.log(); 
     ajaxresponse.forEach(function(loaddata) { 
     console.log(loaddata.menu_custom_title); 

    }); 

     }); 
    } 
    render() { 
     return (
     <div> 
      <ul> 
       <li><Link to="/home" >{this.state.home}</Link></li> 
       <li><Link to="/about" >{this.state.about}</Link></li> 
       <li><Link to="/contact" >{this.state.contact}</Link></li> 
      </ul> 

      {this.props.children} 
     </div> 
    ) 
    } 
} 

export default App; 

Answer 1

ストア状態変数でres.data.result_setデータはサーバーから取り出された後、

this.setState({data: res.data.result_set}); 

その後、動的にメニューアイテムを生成するには、この機能を使用します。

_createMenuItems(){ 
    return this.state.data.map((loaddata, index)=> 
     <li key={index}><Link to={/*put the link here*/} >{loaddata.menu_custom_title}</Link></li> 
    ); 
} 

render() { 
    return (
     <div> 
      <ul> 
       <li><Link to="/home" >{this.state.home}</Link></li> 
       <li><Link to="/about" >{this.state.about}</Link></li> 
       <li><Link to="/contact" >{this.state.contact}</Link></li> 
       {this._createMenuItems()} 
      </ul> 
      {this.props.children} 
     </div> 
    ) 
}