Как сохранить компонент реквизита в избыточном состоянии?

Question

Мое состояние избыточности выглядит следующим образом.

import SearchIcon from "@material-ui/icons/Search";

const initState = {
  salesIconList: {
    Icon: TrendingUpIcon,
    color: "#ff9800",
    text: "sale analysis",
    onClick: "/sales/sales"
  }
};

TrendingUpIcon используется для рендеринга конкретной страницы.

class SalesIconList extends React.Component {
  handleRoute = route => {
    this.props.history.push(route);
  };

  render() {
    children.push(
      <ButtonType
        key={v4()}
        Icon={stockIconList.Icon}
        color={stockIconList.color}
        text={stockIconList.text}
        onClick={this.handleRoute.bind(this, stockIconList.onClick)}
      />
    );
    return (
      {children}
    );
  }
}

Но TrendingUpIcon не является сериализуемым значением, при его обновлении этобольше не существует.

Answer 1

Для такого рода проблем вы можете создать поисковый хеш, который делает ваш тип сериализуемым.Например:

import TrendingIcon from 'whevever'

const iconHash = {
  trendingIcon: TrendingIcon
}

export iconHash

Затем, когда вам нужен значок, вы сохраняете строковое представление и ищите его.Например:

import iconHash from 'wheverer'

...
<ButtonType
  key={v4()}
  Icon={iconHash[stockIconList[i].Icon]}
  color={stockIconList[i].color}
  text={stockIconList[i].text}
  onClick={this.handleRoute.bind(this, stockIconList[i].onClick)}
/>

В вышеприведенном случае ваши редукционные данные могут выглядеть следующим образом:

const initState = {
  salesIconList: {
    Icon: 'trendingIcon', // notice it is now a string
    color: "#ff9800",
    text: "sale analysis",
    onClick: "/sales/sales"
  }
}  

Это грубый пример, но, надеюсь, вы получите общее представление.Вам нужно найти способ сделать ваши типы сериализуемыми.