Custom component not getting rendered properly on this basic ReactJS app

问题

I have a very basic ReactJS app which uses Redux which contains the following components:

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

In my opinion the Redux logic is fine because I have tested by doing couple of things.

My problem is that when the render(...) method of: PanelMaterialSize gets called, the component: Select doesn't get rendered with the new data (which changes every one second).

Here you have a Codesandbox.io you can play with (preferable use Chrome):

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

Any idea on how to get its content changed properly?

If possible, please, provide back a new Codesandbox.io with your solution, forked from the previous one.

Thanks!

回答1:

the problem is here in your select component. you are passing initially empty array and checking your component with this.state.data props, next time reducer change your this.state.data will not update the data. because you initialize in constructor. constructor only invoke once when component mount.

SOLVED DEMO LINK

The Problem is in your select render method:

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

来源：https://stackoverflow.com/questions/55821440/custom-component-not-getting-rendered-properly-on-this-basic-reactjs-app

标签

javascript

reactjs

redux

react-redux