如何在 React 中使用 useEffect hook 和 async/await 检索嵌套的 JSON 数据

Question

我需要与内容集成，并且很难获取嵌套的JSON数据

当我这样做时，我得到了想要的结果：

  const client = contentful.createClient({
    space: '<space_id>',
    accessToken: '<access_token>'
  });
  useEffect(async () => {
    const response = await client.getEntry(id);
    setHeadLinks(response.fields.slug);
  }, []);
  console.log(headLinks);

但是，我在控制台中收到警告：

警告：效果函数不得返回除用于清理的函数之外的任何内容。

看起来你写了useEffect(async (( => ...(或返回了一个承诺。相反，在效果中编写异步函数并立即调用它：

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

因此，当我尝试它时，我收到一条错误消息，指出未定义响应：

useEffect(() => {
    const fetchData = async () => {
      const response = await client.getEntry(id);
    };
    setHeadLinks(response.fields.slug);
    fetchData();
  }, []);
  console.log(headLinks);

谢谢你的帮助

Answer 1

您将调用移动到函数外部的setHeadLinks，因此response变量不在范围内。只需要将其移回内部：

useEffect(() => {
  const fetchData = async () => {
    const response = await client.getEntry(id);
    setHeadLinks(response.fields.slug);
  };
  fetchData();
}, []);

Answer 2

发生这种情况是因为response是在async函数的块中定义的。尝试在async函数作用域之外定义response以利用闭包。

useEffect(async () => {
  let response;
  const fetchData = async () => {
    response = await client.getEntry(id);
  };
  await fetchData();
  setHeadLinks(response.fields.slug);  
}, []);

特别注意，为此，您需要使用 let 而不是 const .您在使用async/await时也有问题。请参阅更正后的示例并查看下面的链接以获取有关所述主题的更多信息。

https://developer.mozilla.org/en-US/docs/Glossary/Scope

https://developer.mozilla.org/es/docs/Web/JavaScript/Closures

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

这应该可以解决您当前的错误，但我不知道它是否足以满足您的要求。