如何渲染React异步自定义hook返回的数据？

问题原因 #

所有异步函数默认返回Promise对象，你直接在组件顶层调用useFetch()拿到的是处于Pending状态的Promise实例，而非实际的接口返回值：

• 你将Promise作为useState初始值传入，JSON.stringify处理Promise实例会返回空对象{}，就是你当前看到的渲染结果
• 你在useEffect中监听的data是固定的Promise实例，引用不会发生变化，所以useEffect回调永远不会触发，state无法更新。

解决方案 #

我们完全保留你要求的useFetch异步属性、不修改原有fetch和useFetch的实现，也不会在useEffect内直接编写数据获取逻辑，修改后的代码如下：

import { useState, useEffect } from 'react'

const fetch = async () => {
  /* This code can't be changed */
  return "Data to be displayed"
}

const useFetch = async () => { // This function remains asynchronous
  let data = await fetch();
  return data;
};

const App = () =>  {
  const [state, setState] = useState(null);

  useEffect(() => {
    // 仅等待useFetch返回的Promise结果，未直接编写数据获取逻辑，符合约束
    const getData = async () => {
      const fetchResult = await useFetch();
      setState(fetchResult);
    }
    getData();
  }, []);

  // 可选加载状态处理
  if (state === null) return <h1>加载中...</h1>
  return <h1>{JSON.stringify(state)}</h1>
}

export default App;

修改后App组件的逻辑后，就可以正确渲染出"Data to be displayed"字符串。

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