问题

Question

使用 react ( useeffect ) 获取 json api

2021-05-19

809

javascript reactjs react-hooks

你好，

这是我第一次使用 React。我想获取一些 json 格式的数据并将其列在我的页面中。下面的代码不起作用。

import React, { useState, useEffect } from "react";
import axios from "axios";

function DataFetching() {
  const [users, setUsers] = useState({ hits: [] });
  //const [query, setQuery] = useState("redux");

  useEffect(async () => {
    const fetchData = async () => {
      const result = await axios("url");
      setUsers(result.data);
    };
  }, []);

  return (
    <div>
      <p>Hellooooo</p>
      <ul>
        {users.hits.map((user) => (
          <li key={user.id}>{user.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFetching;

Answer 1

问题

useEffect 钩子回调是 100% 同步的，它们根本不能是异步的（即声明为 async ）。这也隐式返回了一个 Promise，并与效果清理功能混淆。
您的代码从不调用 fetchData 函数，因此实际上没有任何更新。
您踩踏状态形状并将结果数组放在根状态级别，而不是放在 hits 键下的对象中。

解决方案

从效果回调中删除 async 关键字。
在效果回调主体中调用 fetchData 。
正确更新状态。

代码：

useEffect(() => {
  const fetchData = async () => {
    try {
      const result = await axios("url");
      setUsers({ hits: result.data });
    } catch(error) {
      // handle any GET request or response handling errors
    }
  };
  fetchData();
}, []);