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

Question

我需要与contentful集成，并且很难获得嵌套的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 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();
}, []);