反应选择选项不显示

Question

我需要修改一些反应选择组件（NoOptionsMessage，Option）。

function NoOptionsMessage(props) {
  if (props.options.length) return null;
  return (
    <Typography
      className={props.selectProps.classes.noOptionsMessage}
      {...props.innerProps}
    >
      No Result found
    </Typography>
  );
}

function Option(props) {
  return (
    <MenuItem
      buttonRef={props.innerRef}
      selected={props.isFocused}
      component="div"
      style={{
        fontWeight: props.isSelected ? 500 : 400
      }}
      {...props.innerProps}
    >
      {props.children}
    </MenuItem>
  );
}

我可以看到，此后每次调用api都会正确响应数据和NoOptionsMessage。但是奇怪的是，在某些情况下没有调用Option组件。

这是我使用render-select的渲染功能

render() {
    const { classes, options, searchable } = this.props;
    const components = {
      Option,
      NoOptionsMessage
    };
    console.log('result', options); // evertime prints result
    return (
      <div className={classes.root}>
        <Select
          classes={classes}
          options={options}
          isSearchable={searchable}
          components={components}
          value={this.state.selectedOption}
          onChange={this.handleChange}
          placeholder={this.props.placeholder}
        />
      </div>
    );
  }