タブのアイコンを表示

Question

タブの名前、タブのID、アイコンのID（その外部キー）を持つタブのAPIを持っています。タブのアイコンを表示したいのですが、どのようにapiがそのように設計されているかを表示できます。

API /タブ

[ 
{ 
    "id": 114, 
    "name": "analytics", 
    "icon": 2, 
}, 
{ 
    "id": 127, 
    "name": "share", 
    "icon": 2, 
} 

]

API /アイコン

[ 
    { 
     "id": 1, 
     "name": "computer", 
    }, 
    { 
     "id": 2, 
     "name": "insert-photo", 
    }, 
    { 
     "id": 3, 
     "name": "account-circle", 
    } 
] 

header.js

componentDidMount() { 
     this.props.fetchTabs(); 
    } 

    render() { 
    const tabs = _.map(this.props.tabs.tabs, (tab) => 
      <span className="tab" key={tab.id}> 
      <a href="">{tab.name}</a> 
      </span> 
    ); 

const mapStateToProps = (state) => ({ 
    fetchIcon: state.fetchIcon, 
    tabs: state.tabs, 
}); 

function mapDispatchToProps(dispatch) { 
    return bindActionCreators({ 
    fetchTabs, 
    }, dispatch); 
} 

タブのアイコンをIDとリンクさせて表示する方法を教えてください。

const mapStateToProps = (state) => ({ 
    fetchIcon: state.fetchIcon, 
    tabs: state.tabs.map(tab => ({ 
     ...tab, icon: state.fetchIcon.find(icon => 
      icon.id === tab.icon) 
     ).name 
    }), 
    tabsPost: state.tabsPost 
}); 

Answer 1

を使用すると、エラーのスクリーンショット

あなたがmapStateToProps内のデータを非正規化することができます。

const mapStateToProps = state => ({ 
    tabs: state.tabs.map(tab => ({ 
     ...tab, 
     icon: state.icons.find(icon => 
      icon.id === tab.icon 
     ).name 
    }) 
}) 

今tab.iconはcomputer、のいずれかになりますコンポーネントのまたはaccount-circle。

編集：私は予期しないトークンとして.nameの部分でエラーが発生します

const mapStateToProps = state => { 
    return { 
     tabs: state.tabs.tabs.map(tab => { 
      const icon = state.deviceEventOption.find(icon => Number(icon.id) === tab.icon); 
      return { 
       ...tab, 
       icon: icon && icon.name 
      }; 
     }) 
    }; 
};