Material UI Autocomplete onChange无法更新值问题求助

从API获取Autocomplete组件的选项过程正常，也能正常显示API返回的已选选项，但尝试删除或添加分类值时无法完成操作。

相关代码 #

PostInfo.jsx #

import SelectPostsCatsOptions from "../../components/autocomplete/SelectPostsCatsOptions";
import postInfo from "./postInfo.json";
export default function PostInfo() {
  const [categories, setCategories] = useState([]);
  const [selectedCategories, setSelectedCategories] = useState([]);

  useEffect(() => {
    const getPost = async () => {
      try {
        setCategories(postInfo[0].categories);
        setSelectedCategories(postInfo[0].categories);
      } catch (err) {}
    };
    getPost();
  }); // 缺少依赖数组

  return (
   
    <div className="PostInfoPage">
      <>
        <div>
          <form>
            <div>
              <h3>Post Categories:</h3>
              <SelectPostsCatsOptions
                selectedCategories={selectedCategories}
                setSelectedCategories={setSelectedCategories}
                onChange={(event, newSelectedCategories) =>
                  setSelectedCategories(newSelectedCategories)
                }
                value={selectedCategories}
              />
              <p>Selected Categories:</p>
            </div>
          </form> 
        </div>
      </>  
    </div>
  );
}

SelectPostsCatsOptions.jsx #

import categories from "./postsCategories.json";

export default function SelectPostsCatsOptions({
  selectedCategories,
  setSelectedCategories,
  onChange,
  value
}) {
  return (
    <div>
      <Autocomplete
        id="categories"
        disablePortal
        multiple
        getOptionLabel={(category) => category.catName}
        options={categories}
        disableGutters
        isOptionEqualToValue={(option, value) =>
          option.catName === value.catName
        }
        renderOption={(props, categories) => (
          <li {...props} key={categories.id}>
            {categories.catName}
          </li>
        )}
        renderTags={(value, getTagProps) =>
          value.map((option, index) => (
            <Chip
              key={option.id}
              label={option.catName}
              {...getTagProps({ index })}
            />
          ))
        }
        renderInput={(params) => (
          <TextField {...params} placeholder="Categories" />
        )}
        value={value}
        onChange={onChange}
      />
    </div>
  );
}

问题原因及解决方法 #

核心问题 #

PostInfo.jsx中的useEffect未设置依赖数组，导致每次组件渲染时都会重新执行该副作用，进而将selectedCategories重置为postInfo[0].categories的初始值。所以你每次修改选中项后，组件一渲染就会被打回原形，看起来像是无法添加/删除标签。

修复步骤 #

1. 给useEffect添加空依赖数组，让它仅在组件第一次挂载时执行初始化：

useEffect(() => {
  const getPost = async () => {
    try {
      setCategories(postInfo[0].categories);
      setSelectedCategories(postInfo[0].categories);
    } catch (err) {}
  };
  getPost();
}, []); // 添加空数组作为依赖

2. （可选优化）isOptionEqualToValue建议用唯一标识（比如id）进行比较，避免同名分类导致的识别错误：

isOptionEqualToValue={(option, value) => option.id === value.id}

修改后，selectedCategories的状态就能正常保存修改，Autocomplete的添加/删除标签功能即可正常工作。

内容的提问来源于stack exchange，提问作者sultan.h