IT技术 - 自定义组件未在此基本 ReactJS 应用程序上正确呈现 - 吾爱随笔录

我有一个非常基本的ReactJS应用程序，它使用Redux包含以下组件：

PanelMaterialSize > Select

/src/controls/PanelMaterialSize/PanelMaterialSize.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import './PanelMaterialSize.scss';
import Select from '../Select/Select';
import { setThemeList } from '../../store/AppConfig/actions';

class PanelMaterialSize extends Component {

  componentDidMount() {
    this.n = 1;
    setInterval(() => {
      let themeList = [
        { value: this.n, text: 'Option ' + this.n },
        { value: this.n + 1, text: 'Option ' + (this.n + 1) },
        { value: this.n + 2, text: 'Option ' + (this.n + 2) },
      ];
      this.props.setThemeList(themeList);
      this.n += 3;
    }, 1000);
  }

  render() {
    return (
      <div className="partial-designer-panel-material-size">
        <div>
          <div className="label-input">
            <div className="label">MATERIAL</div>
            <div className="input">
              <Select data={this.props.themeList} style={{ width: '100%' }} />
            </div>
          </div>
        </div>
      </div>
    );
  }

}

const mapStateToProps = (appState) => {
  return {
    themeList: appState.appConfig.themeList,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    setThemeList: (themeList) => dispatch(setThemeList(themeList)),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(PanelMaterialSize);

在我看来，Redux逻辑很好，因为我已经通过做几件事进行了测试。

我的问题是，当render(...)方法 of:PanelMaterialSize被调用时，组件:Select不会使用新数据（每秒钟更改一次）进行渲染。

在这里你有一个Codesandbox.io你可以玩的（最好使用Chrome）：

https://codesandbox.io/s/03mj405zzv

关于如何正确更改其内容的任何想法？

如果可能，请提供一个新Codesandbox.io的解决方案，从前一个分叉出来。

谢谢！