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（）=> ...）或返回了Promise。而是在效果内部编写异步函数并立即调用它：

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函数的块内定义的。尝试在response函数范围之外定义async，以利用闭包。

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

这应该可以解决您当前的错误，但是我不知道这对您要执行的操作是否足够。

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

2 个答案: