uses draft.js to build a rich text editor. When setting the font size function, a select selection box is used. The effect you want to achieve is that after the cursor selects Chinese text, the value of select becomes the font size of the selected text.
can now obtain the font size of the selected text, as long as the value of select is set to the selected font size, but the problem of Maximum update depth exceeded is encountered in the process of implementing this function. < H2 > related codes < / H2 >

// select
class SelectOptions extends React.Component {
  constructor() {
    super();
    this.onToggle = (e) => {
      e.preventDefault();
      console.log(this.props.style)
      this.props.onToggle(this.props.style);
    };
  }

  componentWillReceiveProps(nextProps) {
    // 
    // 
    if (nextProps.active) {
      nextProps.onSelectedHandler(nextProps.style)
    }
  }

  render() {
    return (
      <option
        value={this.props.style}
      >
        {this.props.label}
      </option>
    )
  }
}

// select
export default class FontSizeControl extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      value: "font16"
    }
  }

  handleChange = e => {
    this.setState({
        value: e.target.value
    }, () => {
      this.props.onToggle(this.state.value)
    });
  }

  onSelectedHandler = (selected) => {
    console.log(selected)
    this.setState({
      value: selected
    });
  }

  render() {
    return (
      <select
        onChange={this.handleChange}
        value={this.state.value}
      >
        {fontSizeTag.map(type =>
          <SelectOptions
            key={type.label}
            active={this.props.editorState.getCurrentInlineStyle().has(type.style)}
            label={type.label}
            onToggle={this.props.onToggle}
            style={type.style}
            onSelectedHandler={this.onSelectedHandler}
          />
        )}
      </select>
    );
  }
}