显示其选项卡的图标

Question

我有一个选项卡的 api，它有选项卡的名称、选项卡的 id 和图标的 id（它的外键）。我想显示其选项卡的图标，但是当以这种方式设计 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、insert-photo 或account-circle。

编辑：经过讨论，我们提出了以下代码：

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