如何从父级清除 MUI 自动完成字段？

Question

//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>**

主App组件具有filterData状态和handleChangeAuto函数，用于将自动完成数据分配给过滤器。

然后在父“App”组件中，Reset 按钮会触发removeTag 函数，该函数会清除过滤器值。应该重置自动完成文本字段，但它没有这样做。

//CUSTOM AUTOFIELD COMPONENT
const FilterAutoCompleteField = ({
  label,
  name,
  value,
  onChangeAuto,
}) => {
  data=[{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 中传递空值。那也行不通。

Answer 1

我只是在编译时发现一个错误，我做了一些调整，代码本身没问题。 我所做的调整：

• 正确声明变量数据

  const data = ....

• 删除设置状态上的状态传播
• 删除 useId 钩子

这里是代码的链接：StackBlitz

也许您可以检查的另一件事是组件导入