React组件绑定Options数组及FilterColors报错的技术咨询

我帮你定位到了代码里导致过滤逻辑报错的两个核心问题，咱们一步步来解决：

问题分析 #

• 错误1：未正确获取options数组
  你在构造函数里只是临时声明了const options = this.props.options，但并没有把它挂载到类实例的this对象上，所以filterColors方法里的this.options其实是undefined，调用filter方法自然会抛出错误。而且更合理的做法是直接从this.props.options获取，这样能拿到最新的props值，避免props更新后实例上的options过时。

• 错误2：调用filterColors时丢失上下文
  在loadOptions方法里，你直接写了filterColors(inputValue)，但这个方法是类的实例方法，必须通过this.filterColors来调用，否则会找不到这个函数，导致执行报错。

修复后的完整代码 #

export default class WithCallbacks extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: '',
    };
    // 冗余的临时变量已删除，直接从props取最新值即可
    this.filterColors = this.filterColors.bind(this);
    this.loadOptions = this.loadOptions.bind(this);
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  filterColors = (inputValue) => {
    // 直接从props获取最新的options数组，避免值过时
    return this.props.options.filter(i => 
      i.label.toLowerCase().includes(inputValue.toLowerCase())
    );
  };

  loadOptions = (inputValue, callback) => {
    setTimeout(() => {
      // 通过this调用类实例上的filterColors方法，确保上下文正确
      callback(this.filterColors(inputValue));
    }, 100);
  };

  handleInputChange = (newValue) => {
    const inputValue = newValue.replace(/\W/g, '');
    this.setState({ inputValue });
    return inputValue;
  };

  render() {
    console.log(this.props.options);
    return (
      <div>
        <pre>inputValue: "{this.state.inputValue}"</pre>
        <AsyncSelect
          cacheOptions
          loadOptions={this.loadOptions}
          defaultOptions
          onInputChange={this.handleInputChange}
        />
      </div>
    );
  }
}

额外优化提示 #

• 我在构造函数里额外绑定了loadOptions和handleInputChange的上下文，虽然你用了箭头函数，但绑定一下能避免某些场景下的上下文丢失问题，让代码更稳健。
• 如果你的props.options可能为空数组，建议在filterColors里加个兜底判断：(this.props.options || []).filter(...)，防止空值调用filter方法引发新错误。

内容的提问来源于stack exchange，提问作者Jessica Bulldog