useEffect钩子问题：基于Fetch API的数组无法填充分类数组

问题原因 #

React的状态更新是异步的，调用setData(json)后，data不会立刻更新为新值。你当前的代码里，在setData之后直接用data.map()，拿到的还是组件初始化时的data初始值（大概率是空数组），所以生成的allCategories只有"all"，没有从接口获取到的分类数据。

解决方案一：直接用接口返回的json数据生成分类 #

既然已经拿到了接口返回的完整json数据，直接用它来处理分类就行，不用等data状态更新：

function RecipesList() {
  const [data, setData] = useState([]);
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    const getRecipesList = async () => {
      const response = await fetch("http://localhost:4000/recipe/allrecipes", {
        method: "GET",
      });
      const json = await response.json();

      if (response.ok) {
        setData(json);
        // 直接使用接口返回的json生成分类
        const allCategories = [
          "all",
          ...new Set(json.map((item) => item.category)),
        ];
        setCategories(allCategories);
      }
    };

    getRecipesList();
  }, []);
}

解决方案二：监听data状态变化再更新分类 #

把生成分类的逻辑单独放到一个依赖data的useEffect里，当data从接口获取到新值后，自动执行分类生成操作：

function RecipesList() {
  const [data, setData] = useState([]);
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    const getRecipesList = async () => {
      const response = await fetch("http://localhost:4000/recipe/allrecipes", {
        method: "GET",
      });
      const json = await response.json();

      if (response.ok) {
        setData(json);
      }
    };

    getRecipesList();
  }, []);

  // 当data更新时，重新生成分类数组
  useEffect(() => {
    if (data.length === 0) return;
    const allCategories = [
      "all",
      ...new Set(data.map((item) => item.category)),
    ];
    setCategories(allCategories);
  }, [data]);
}

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