提交后Autocomplete组件输入框值未清除问题排查

我正在开发带选项选择功能的Autocomplete组件，父组件传递的props如下：

const selectAutocompletedConfig: FilterSelectAutocomplete = {
  data: scenariosList,
  label: {
    className: 'filter-input-label',
    name: 'Scenario name',
  },
  field: {
    className: 'filter-select',
    value: selectedScenario,
    disabled: isPending,
    onChange: handleChangeSelectedScenarioAutocomplete,
  },
};

data 是包含value和label的对象数组

子组件里我用本地useState维护选中值，并用useEffect监听父组件传入的field.value变化。

目前组件可以选择、搜索选项，也能提交表单，但遇到一个问题：

• 子组件本地useState的值已清空为''
• 父组件的选中值也已设置为''
• 但输入框显示的值并未清除

子组件代码 #

function FilterDropdown({ label, field, data }: FilterSelectAutocomplete) {
  const [value, setValue] = useState<any>(field.value);

  useEffect(() => {
    setValue(field.value);
  }, [field.value]);

  interface SelectOption {
    label: string;
    value: string;
  }

  const defaultProps = {
    options: data,
    getOptionLabel: (option: SelectOption) => {
      if (!option) return '';
      return option.label || '';
    },
  };

  const handleReset = () => {
    setValue('');
  };

  const handleChange = (newValue: any) => {
    console.log('newValue', newValue);
    setValue(newValue);
  };

  console.log('value', value);
  return (
    <>
      {<InputLabel className={label.className}>{label.name}</InputLabel>}
      {data && (
        <Autocomplete
          {...defaultProps}
          id="controlled-demo"
          // value={value}
          onInputChange={(_event: any, newValue: any) => handleChange(newValue)}
          onChange={(_event: any, newValue: any) => field.onChange ? field.onChange(newValue.value) : ''}
          renderInput={(params) => <TextField {...params} value={value} />}
          disabled={field.disabled}
          size="small"
          className={`${field.className} autocomplete-filter`}
          isOptionEqualToValue={(option, value) => option.value === value.value}
        />
      )}
      <Button onClick={handleReset}>Reset</Button>
      <div>The current value is: {value ? value.label : ''}</div>
    </>
  );
}

父组件代码 #

function ScenarioPage() {
    const [selectedScenario, setSelectedScenario] = useState<any>(null);
    const [addScenarioToSlot, resultsAddScenarioToSlot] = useAddScenarioToSlotMutation(undefined);

  useEffect(() => {
    // 移除场景已分配的插槽（如果之前有分配）
    if (resultsAddScenarioToSlot.isSuccess) {
      const scenario = getScenarioByID(selectedScenario);
      const updatedSlotsList = removeScenarioSlotFromList(selectedSlot);
      addSlotToSlotsList(scenario, updatedSlotsList);

      setSelectedScenario(null);
      setSelectedSlot('');
    }
  }, [resultsAddScenarioToSlot.isSuccess]);

  const handleAddScenario = () => {
    const isScenarioName = newScenarioData.name && newScenarioData.name.length > 0;

    if (isScenarioName) {
      addScenario(newScenarioData);
      setNewScenarioData(emptyDropdownValue);
    }
  };

  const handleChangeSelectedScenarioAutocomplete = (value: string) => {
    setSelectedScenario(value) as unknown as string;
  };

  const handleAddToSlot = () => {
    if (selectedScenario && selectedSlot) {
      // 提交API请求，将场景添加到选中插槽
      addScenarioToSlot({ scenario: selectedScenario, slot: selectedSlot });
    }
  };

  const selectScenarioSlotConfig = {
    data: slotsList,
    label: {
      className: 'filter-input-label',
      name: 'Scenario SCS Slot',
    },
    field: {
      className: 'filter-select',
      value: selectedSlot,
      onChange: handleChangeSelectedSlot,
      disabled: isPending,
    },
  };

  return (
    <MuiAccordionUsage title={'Slot Management'} id={'slotManagement'} className="filters">
          <Stack spacing={2}>
            <Grid item xs={12}>
              <Box sx={fieldNewScenarioWrapperSx}>
                <FilterDropdown {...selectAutocompletedConfig} />
              </Box>
              <Box sx={fieldNewScenarioWrapperSx}>
                <FilterSelect {...selectScenarioSlotConfig} />
              </Box>
              <Box sx={buttonScenarioSx}>
                <Button variant="contained" sx={{ mt: '23px' }} onClick={handleAddToSlot} disabled={isPending}>
                  Add to slot
                </Button>
                <p>selected scenario {selectedScenario}</p>
              </Box>
            </Grid>
          </Stack>
        </MuiAccordionUsage>
  )
}

解决方案 #

问题出在三个核心点：

1. Autocomplete受控值未绑定 #

你注释掉了value={value}，但MUI的Autocomplete组件需要通过value属性控制选中状态，仅在TextField设置value无法同步组件内部状态。

2. 值类型不匹配 #

父组件selectedScenario初始值为null，子组件重置时设为''，同时isOptionEqualToValue的比较逻辑在value为字符串或null时会失效。

3. 重置逻辑未同步父组件 #

子组件handleReset仅更新本地状态，未通知父组件修改selectedScenario，导致后续状态不一致。

修改后的子组件代码

function FilterDropdown({ label, field, data }: FilterSelectAutocomplete) {
  // 统一初始值类型，与父组件保持一致（用null而非''）
  const [value, setValue] = useState<any>(field.value ?? null);

  useEffect(() => {
    setValue(field.value ?? null);
  }, [field.value]);

  interface SelectOption {
    label: string;
    value: string;
  }

  const defaultProps = {
    options: data,
    getOptionLabel: (option: SelectOption | null) => {
      // 处理null的情况
      if (!option) return '';
      return option.label || '';
    },
  };

  const handleReset = () => {
    setValue(null);
    // 通知父组件更新状态
    field.onChange?.('');
  };

  const handleChange = (newValue: any) => {
    setValue(newValue);
  };

  return (
    <>
      <InputLabel className={label.className}>{label.name}</InputLabel>
      {data && (
        <Autocomplete
          {...defaultProps}
          id="controlled-demo"
          // 绑定受控值
          value={value}
          onInputChange={(_event, newValue) => handleChange(newValue)}
          onChange={(_event, newValue) => {
            field.onChange?.(newValue ? newValue.value : '');
          }}
          renderInput={(params) => (
            <TextField
              {...params}
              // 同步输入框显示值，处理null的情况
              value={value ? value.label : ''}
            />
          )}
          disabled={field.disabled}
          size="small"
          className={`${field.className} autocomplete-filter`}
          // 处理value为null的比较逻辑
          isOptionEqualToValue={(option, value) => {
            if (!value) return false;
            return option.value === value.value;
          }}
          // 支持按ESC清空
          clearOnEscape
        />
      )}
      <Button onClick={handleReset}>Reset</Button>
      <div>The current value is: {value ? value.label : ''}</div>
    </>
  );
}

父组件状态更新逻辑调整

const handleChangeSelectedScenarioAutocomplete = (value: string) => {
  setSelectedScenario(value || null);
};

修改后：

• Autocomplete组件的受控状态与输入框显示完全同步
• 重置操作同时更新子组件和父组件状态
• 处理了null与空字符串的类型匹配问题，避免逻辑错误

内容的提问来源于stack exchange，提问作者Kuba Bujak