useEffect不适用于自动选择下拉菜单

这种情况是,当用户保存新类别时,应使用新值重新呈现“类别”下拉列表。不幸的是,这种情况并没有发生。

我尝试了两种方法:

1. 当相关性数组设置为 类别 变量在这种情况下,获取类别的调用是无限的,如下图所示。

  useEffect(() => {
    const fetchCategoryList = async () => {
      const data = await categoryApi.getAllDD();
      setCategory(data);
    };
    fetchCategoryList();
  }, [category]);

2. 当相关性数组设置为 类别长度 变量在这种情况下,useEffect根本不会被调用。

  const [category, setCategory] = useState([]);
..
..
..
  useEffect(() => {
    const fetchCategoryList = async () => {
      const data = await categoryApi.getAllDD();
      setCategory(data);
    };
    fetchCategoryList();
  }, [category.length]);

            <Autocomplete
              disablePortal
              id="ddCategory"
              getOptionLabel={(option) => option.name}
              getOptionKey={(option) => option.id}
              options={category}
              sx={{ width: 300 }}
              renderInput={(params) => (
                <TextField {...params} label="Parent Category" />
              )}
              size="small"
              onChange={handleOnAutoCompleteInputChange}
            />

.
.
.

          const handleOnAutoCompleteInputChange = (
            e: React.SyntheticEvent,
            value: any,
            reason: string
          ) => {
            setFormData((prevFormData) => ({
              ...prevFormData,
              parentId: value?.id,
            }));
          };

知道为什么会发生这种事吗?