javascript - react : Suspended component doesn't run the useEffect hook

Question

目前正在尝试 react Hook 和 react 悬念。我正在尝试创建一个钩子(Hook) useApolloQuery，它会获取一些数据并 promise 等待数据加载。

我将获取数据的逻辑放在 useEffect 中，但如果您立即在组件中抛出一个 promise(并因此暂停它)，效果似乎永远不会运行。

这是我的代码:(或 codesandbox 链接:https://codesandbox.io/s/x73pwj164q)

function createPromiseResolver() {
  let resolve;
  const promise = new Promise(newResolver => {
    resolve = newResolver;
  });

  return { resolve, promise };
}

function useApolloQuery() {
  const [data, setData] = useState();
  const promsieResolver = createPromiseResolver();

  console.log("this runs");
  useEffect(() => {
    console.log("this doesn't run");

    const timeoutId = setTimeout(() => {
      setData("Some fake data");
      promsieResolver.resolve();
    }, 500);

    return () => clearTimeout(timeoutId);
  });

  if (!data) throw promsieResolver.promise;

  return data;
}

function App() {
  const data = useApolloQuery();

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{data}</h2>
    </div>
  );
}

所以在该代码中只有第一个 console.log 运行，因为 useEffect Hook 从不运行

悬念应该是这样的吗？有什么办法让它发挥作用吗？

Answer 1

useEffect 不会运行，因为您在实际函数返回之前抛出了一个 promise ，因此该 promise 永远不会得到解决。

问题出在线路上

if (!data) throw promsieResolver.promise;

初始 data 未定义，因此 !data = true。它抛出一个 promise ，因此该函数永远不会返回但会短路。删除此行实际上会运行 useEffect Hook

解决方案 2:或者您可以为 undefined 以外的数据设置初始状态，如下所示const [data, setData] = useState('初始数据');