Показать значок своей вкладки

Question

У меня есть 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); 
} 

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

скриншот ошибки

при использовании

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, insert-photo или account-circle в вашем компоненте.

Edit: после обсуждения, мы придумали следующий код:

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 
      }; 
     }) 
    }; 
};