Question

使用异步功能测试钩子时出现以下错误；

不变违反对象作为React子对象无效（找到：[object Promise]）。

async function Test () {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts/42');
  const json = await data.json();  
  const id = json.id;
  return id;
}

...

function App() {
  return (
    <div className="App">
      <h1>React Hooks Example</h1>

      <Suspense fallback={<LoadingMessage />}>
        <Test />
      </Suspense>

    </div>
  );
}

https://codesandbox.io/s/4w2yzvyro7

如何解决此错误

Answer 1

<Suspense>应该以非常特定的方式使用。它将暂停lazy组件的渲染，并按原样渲染其他类型的组件。

Test不是lazy组件，而是async函数，它返回promise对象而不是React元素，因此Test不是有效的React组件。

lazy组件旨在呈现从延迟加载的组件的默认导入。基本上，lazy组件应该返回具有default属性的对象的承诺，该对象包含有效的React组件。

它可以用作：

const Test = lazy(async () => {
  const data = await fetch('https://jsonplaceholder.typicode.com/posts/42');
  const json = await data.json();  
  const id = json.id;

  return { default: (props) => <div>{id}</div> };
});

...

<Suspense fallback={<LoadingMessage />}>
  <Test />
</Suspense>

请注意，由于其主要用途，lazy组件无法接受参数，如果Test具有props，它们将被传递给async函数返回的组件。 / p>

将异步函数与React挂钩一起使用时出现错误

1 个答案: