React setState引发BaseUI Select下拉关闭、输入清空问题排查

问题描述 #

使用Redux Form管理表单状态的React组件中，调用setState时，BaseUI的Select组件下拉菜单意外关闭，输入值也被清空，但仅需更新输入相关状态。

预期行为 #

在Select组件输入框中输入时，下拉菜单保持展开，输入值留存，同时实现下拉加载动画与选项数量限制。

实际行为 #

每次输入内容时，setState调用后下拉菜单立即关闭，输入值被清空。

额外上下文 #

使用Redux Form管理表单状态，Select组件来自BaseUI。

组件代码 #

// @noflow
import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import { compose, bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import get from 'lodash/get';
import validate from '../pipelineValidation';
import { Button, Linkify, Spinner } from '@uber/phase-ui'; 
import {
  validateKafkaSource,
  validateKafkaVolume,
} from '../../../reducers/pipeline';
import { Select } from 'baseui/select';
import { StyledLink } from 'baseui/link';
import { Label2 } from 'baseui/typography';

class KafkaPipelineSource extends Component {
  constructor(props) {
    super(props);
    this.state = {
      kafkaTopicLists: [],
      loading: false, // Track loading state for spinner
    };
  }

  handleSelectChange = ({ value }) => {
    const selectedLabel = value.length > 0 ? value[0].label : '';
    const { change } = this.props;
    change('kafkaTopic', selectedLabel); // Update form value with selected label
  };

  handleInputChange = event => {
    const inputValue = event.target.value.toLowerCase(); // Get input value and convert to lowercase
    // Update state only if input value changes to prevent unnecessary re-renders
    this.setState({ loading: true }, () => {
      // Simulate asynchronous filtering (replace with actual logic)
      setTimeout(() => {
        const filteredOptions = this.props.kafkaTopicList
          .filter(option => option.toLowerCase().includes(inputValue))
          .slice(0, 100)
          .map(value => ({
            id: value,
            label: value,
          }));
        this.setState({
          kafkaTopicLists: filteredOptions,
          loading: false, // Set loading state to false after filtering
        });
      }, 300); // Simulating a delay for filtering
    });
  };

  validateKafkaTopic = () => {
    const { kafkaTopic, validateKafkaSource } = this.props;
    validateKafkaSource({
      datasetName: kafkaTopic,
    });
  };

  validateKafkaVolume = () => {
    const { kafkaTopic, validateKafkaVolume } = this.props;
    validateKafkaVolume({
      datasetName: kafkaTopic,
    });
  };

  render() {
    const {
      kafkaTopicList = [],
      previousPage,
      handleSubmit,
      kafkaTopic,
      kafkaSource,
      sinkType,
      kafkaVolume,
    } = this.props;

    const { kafkaTopicLists, loading } = this.state;

    console.log('kafkaTopic:', kafkaTopic);
    return (
      <form className="mm-top" onSubmit={handleSubmit}>
        <Label2>Heatpipe Kafka Topic</Label2>
        <div>
          Choose heatpipe avro or protobuf topic to ingest. If you do not have
          one yet, create one.
        </div>
        <Field
          name="kafkaTopic"
          component={({ meta: { touched, error, warning } }) => (
            <div>
              <Select
                ariaLabel="kafkaTopic"
                options={kafkaTopicLists}
                value={kafkaTopicLists.find(o => o.id === kafkaTopic)}
                placeholder="Select..."
                labelKey="id"
                valueKey="label"
                onChange={this.handleSelectChange}
                onInputChange={this.handleInputChange}
                searchable
                overrides={{
                  Dropdown: {
                    style: {
                      maxHeight: '300px',
                    },
                  },
                }}
              />
              {loading && <Spinner size={24} />}
              {touched &&
                ((error && <span>{error}</span>) ||
                  (warning && <span>{warning}</span>))}
            </div>
          )}
        />

异常原因 #

1. Field组件重渲染导致Select重置：Redux Form的Field组件会在表单状态变化时重新渲染内部组件。本地setState触发组件更新时，Field的渲染函数重新执行，Select组件被重建，丢失下拉展开状态和输入值。
2. Select的value依赖动态数组：传入Select的value通过本地state的kafkaTopicLists查找，每次setState更新该数组后，数组引用变化，Select误判值发生变化，重置输入框。
3. onInputChange参数处理错误：BaseUI Select的onInputChange回调直接返回输入字符串，而非原生event对象，当前用event.target.value获取值的方式错误，导致后续状态更新逻辑异常。

修复方案 #

1. 修正onInputChange参数处理

调整handleInputChange以适配BaseUI Select的回调格式：

handleInputChange = (inputValue) => {
  const lowercasedValue = inputValue.toLowerCase();
  this.setState({ loading: true }, () => {
    setTimeout(() => {
      const filteredOptions = this.props.kafkaTopicList
        .filter(option => option.toLowerCase().includes(lowercasedValue))
        .slice(0, 100)
        .map(value => ({ id: value, label: value }));
      this.setState({ kafkaTopicLists: filteredOptions, loading: false });
    }, 300);
  });
};

2. 抽离子组件避免不必要重渲染

将Select相关逻辑封装为独立子组件，用React.memo包裹，减少重渲染：

const KafkaSelect = React.memo(({ 
  kafkaTopicLists, 
  loading, 
  kafkaTopic, 
  onChange, 
  onInputChange 
}) => (
  <div>
    <Select
      ariaLabel="kafkaTopic"
      options={kafkaTopicLists}
      value={kafkaTopicLists.find(o => o.id === kafkaTopic)}
      placeholder="Select..."
      labelKey="id"
      valueKey="label"
      onChange={onChange}
      onInputChange={onInputChange}
      searchable
      overrides={{
        Dropdown: { style: { maxHeight: '300px' } }
      }}
    />
    {loading && <Spinner size={24} />}
  </div>
));

然后在Field中使用该子组件：

<Field
  name="kafkaTopic"
  component={({ meta: { touched, error, warning } }) => (
    <div>
      <KafkaSelect
        kafkaTopicLists={kafkaTopicLists}
        loading={loading}
        kafkaTopic={kafkaTopic}
        onChange={this.handleSelectChange}
        onInputChange={this.handleInputChange}
      />
      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  )}
/>

3. 稳定Select的value引用

基于原始props的kafkaTopicList计算选中值，避免依赖本地state的动态数组：

// 在render函数中计算
const selectedValue = this.props.kafkaTopicList
  .map(item => ({ id: item, label: item }))
  .find(o => o.id === this.props.kafkaTopic);

// 传入Select的value属性
value={selectedValue}

4. 手动控制下拉展开状态

在state中添加下拉状态控制，输入时强制保持展开：

constructor(props) {
  super(props);
  this.state = {
    kafkaTopicLists: [],
    loading: false,
    isDropdownOpen: false
  };
}

更新Select的属性：

<Select
  // ...其他属性
  isOpen={this.state.isDropdownOpen}
  onInputChange={(inputValue) => {
    this.setState({ isDropdownOpen: true });
    this.handleInputChange(inputValue);
  }}
  onMenuOpen={() => this.setState({ isDropdownOpen: true })}
  onMenuClose={() => this.setState({ isDropdownOpen: false })}
/>

内容的提问来源于stack exchange，提问作者Joshua-Michael