显示其选项卡的图标

Question

我有一个 api 选项卡，其中包含选项卡名称、选项卡 ID 和图标 ID（它是外键）。我想显示其选项卡的图标，但是当 api 以这种方式设计时，我该如何显示。

api/tab

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

]

api/icon

[
    {
        "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
            };
        })
    };
};

显示其选项卡的图标

Show icon of its tab

javascript

loops

reactjs

redux

react-redux