如何从父组件清除MUI Autocomplete字段？状态更新后组件未同步

问题描述 #

父组件App维护filterData状态，通过handleChangeAuto同步MUI Autocomplete选中值到filterData。点击Reset按钮清空filterData的soldTo和soldToName字段后，控制台显示状态已重置，但子组件FilterAutoCompleteField中的Autocomplete文本框仍保留旧值；通过filterObject动态初始化filterData时，也存在状态更新后Autocomplete未同步的问题。

核心原因 #

1. Autocomplete的value类型不匹配：当前给Autocomplete传递的value是字符串（soldToName），但组件期望的是options数组中的对象或null。当重置为空白字符串时，组件无法匹配到对应选项，导致视图未更新。
2. value与inputValue绑定冲突：将value和inputValue绑定为同一个值，破坏了Autocomplete内部的状态管理逻辑。
3. 动态初始化错误：filterObject是数组类型，展开后会导致filterData结构异常，状态初始化不符合预期。

修复方案 #

方案一：直接存储选中的选项对象（推荐） #

简化状态结构，直接将选中的Autocomplete选项对象存入filterData，避免拆分id和name带来的同步问题。

父组件修改

const App = () => {
  // 直接存储选中的选项对象，初始为null
  const [filterData, setFilterData] = useState({
    soldTo: null,      
  });

  const handleChangeAuto = (name, value) => {
    setFilterData({
      ...filterData,
      [name]: value, // 直接存入选中的对象或null
    });
  };

  const removeTag = () => {
    setFilterData({ ...filterData, soldTo: null }); // 重置为null
  };

  return (
    <>
      <FilterAutoCompleteField
        label="Sold To"
        name="soldTo"
        value={filterData.soldTo} // 传递选项对象
        onChangeAuto={handleChangeAuto}
      />
      <Button onClick={removeTag}>Reset</Button>
    </>
  );
};

子组件修改

const FilterAutoCompleteField = ({
  label,
  name,
  value, // 接收选项对象或null
  onChangeAuto,
}) => {
  const data = [{id:0, name:"yo"},{id:1, name:"hello"}, {id:2, name:"wow"}];
  const { id } = useId();
  // 输入框文本：有选中对象则用name，否则为空
  const inputValue = value ? value.name : '';

  return (
    <Grid item xs={12} md={4}>
      <InputLabel>{label}</InputLabel>
      <Autocomplete
        disablePortal
        id={id}
        options={data}
        value={value} // 绑定选项对象
        inputValue={inputValue} // 绑定输入框文本
        getOptionLabel={(option) => option.name}
        onChange={(event, newValue) => {
          onChangeAuto(name, newValue);
        }}
        // 可选：清空输入框时同步重置选中值
        onInputChange={(event, newInputValue) => {
          if (newInputValue === '') {
            onChangeAuto(name, null);
          }
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </Grid>
  );
};

方案二：保留原有状态结构（兼容旧代码） #

如果必须拆分存储soldTo（id）和soldToName，需在子组件中根据id匹配对应的选项对象作为Autocomplete的value。

父组件修改

// 父组件调用子组件时传递id和name
<FilterAutoCompleteField
  label="Sold To"
  name="soldTo"
  soldToId={filterData.soldTo}
  soldToName={filterData.soldToName}
  onChangeAuto={handleChangeAuto}
/>

子组件修改

const FilterAutoCompleteField = ({
  label,
  name,
  soldToId,
  soldToName,
  onChangeAuto,
}) => {
  const data = [{id:0, name:"yo"},{id:1, name:"hello"}, {id:2, name:"wow"}];
  const { id } = useId();
  // 根据id匹配选项对象，无匹配则设为null
  const selectedOption = data.find(item => item.id === soldToId) || null;
  const inputValue = soldToName || '';

  return (
    <Grid item xs={12} md={4}>
      <InputLabel>{label}</InputLabel>
      <Autocomplete
        disablePortal
        id={id}
        options={data}
        value={selectedOption}
        inputValue={inputValue}
        getOptionLabel={(option) => option.name}
        onChange={(event, newValue) => {
          onChangeAuto(name, newValue);
        }}
        renderInput={(params) => <TextField {...params} />}
      />
    </Grid>
  );
};

动态初始化问题修复 #

原filterObject是数组类型，展开后会导致filterData结构错误，需改为对象：

const filterObject = { soldTo: "", soldToName: "" }; // 改为对象而非数组
const [filterData, setFilterData] = React.useState({
  ...filterObject
});

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