0

我需要与内容集成，并且很难获取嵌套的 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);

谢谢你的帮助

4

2 回答 2

0

发生这种情况是因为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

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

于 2019-07-13T22:26:49.793 回答
0

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

useEffect(() => {
  const fetchData = async () => {
    const response = await client.getEntry(id);
    setHeadLinks(response.fields.slug);
  };
  fetchData();
}, []);
于 2019-07-13T22:18:27.207 回答