Пользовательский компонент не отображается должным образом в этом базовом приложении ReactJS

Question

У меня есть очень простое ReactJS приложение, которое использует Redux, которое содержит следующие компоненты:

PanelMaterialSize > Select

/ SRC / управления / 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(...): PanelMaterialSize, компонент: Select не обрабатывается с новыми данными (которые изменяются каждую секунду).

Здесь у вас есть Codesandbox.io, с которым вы можете играть (предпочтительно Chrome):

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

Есть идеи, как правильно изменить содержание?

Если возможно, пожалуйста, предоставьте обратно новое Codesandbox.io с вашим решением, раздвоенным от предыдущего.

Спасибо!

Answer 1

проблема здесь в выбранном вами компоненте. Вы пропускаете изначально пустой массив и проверяете свой компонент с помощью реквизитов this.state.data, при следующем изменении редуктора ваш this.state.data не будет обновлять данные. потому что вы инициализируете в конструкторе. Конструктор вызывается только один раз, когда компонент монтируется.

РЕШЕНО ДЕМО-ССЫЛКА

Проблема в выбранном вами методе рендеринга:

  render() {
    let data = this.state[this.name];
    return (
      <div className="control-select" {...this.controlProps}>
        <div className="custom-dropdown custom-dropdown--grey">
          <select className="custom-dropdown__select custom-dropdown__select--grey">
             //change data with this.props.data
            {this.props.data.length > 0 &&
              this.props.data.map((elem, index) => {
                return (
                  <option value={elem.value} key={index}>
                    {elem.text}
                  </option>
                );
              })}
          </select>
        </div>
      </div>
    );
  }