React: 使用 useEffect 从后端 fetch 数据

下面的例子当页面加载时，从 firebase 后端获取数据：

fetch 返回 promise，但是传递给 useEffect 的函数不应返回 promise，所以 useEffect 函数不能写成下面这样！

  // 不能传异步函数给 useEffect ！！
  useEffect(async () => {
    await fetch(
      "https://react-http-fe50a-default-rtdb.firebaseio.com/meals.json"
    );
  }, []);

要写成下面这样，使用内部函数：

  useEffect(() => {
    const fetchMeals = async () => {
      await fetch(
        "https://react-http-fe50a-default-rtdb.firebaseio.com/meals.json"
      );
    };
    fetchMeals();
  }, []);

没有加 try catch 的代码如下，

useEffect(() => {
    const fetchMeals = async () => {
      const response = await fetch(
        "https://react-http-dc50a-default-rtdb.firebaseio.com/meals.json"
      );
      const responseData = await response.json();
      const loadedMeals = [];
      for (const key in responseData) {
          loadedMeals.push({
          id: key,
          name: responseData[key].name,
          description: responseData[key].description,
          price: responseData[key].price,
        });
      }
    };
    fetchMeals();
  }, []);