//PARENT COMPONENT

const App = () => {
const [filterData, setFilterData] = useState({
    //field id and names
    soldTo:"",
    soldToName:"",      
});

const handleChangeAuto = (name, value) => {
    setFilterData({
      ...filterData,
      soldTo: value !== null ? value.id : "",
      soldToName: value !== null ? value.name : "",
    });
  };

const removeTag = () => {
    setFilterData({ ...filterData, soldTo: "", soldToName: "" });
  };
return (<>
<FilterAutoCompleteField
                  label="Sold To"
                  name="soldTo"
                  value={filterData.soldToName}
                  onChangeAuto={handleChangeAuto}
/>
</>)

**<Button onClick={removeTag}>Reset</Button>**

字符串
主应用程序组件具有filterData state和用于将自动完成数据分配给过滤器的DataChangeAuto函数。
然后在父“应用程序”组件中，重置按钮触发removeTag函数，该函数清除过滤器值。这应该重置自动完成文本字段，但它没有这样做。

//CUSTOM AUTOFIELD COMPONENT
const FilterAutoCompleteField = ({
  label,
  name,
  value,
  onChangeAuto,
}) => {
  data=[{id:0, name:"yo"},{id:1, name:"hello"}, {id:2, name:"wow"}]

  const { id } = useId();
 

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

型
当我点击重置按钮时，在控制台窗口中“filterData”被重置，但自动完成文本字段仍然有旧字段。这就像FilteredAutoComplete字段没有更新或呈现。
我尝试在removeTag中传递null值。这也不起作用。

编辑：这里，我在filterData中传递了soldTo和soldTo项。但该对象是通过变量动态传递的。这导致它无法呈现该部分。如何在filterData状态下传递filterObject时修复此问题。

const filterObject = [{soldTo:"", soldToName:""}]
  const [filterData, setFilterData] = React.useState({
    //field id and names
    // soldTo: '',
    // soldToName: '',
    ...filterObject
  });

型
虽然filterData状态已更改。自动完成中的文本未清除。以下是链接：https://stackblitz.com/edit/stackblitz-starters-8d5hed?file=src%2FApp.js