为什么我在页面刷新时收到网络错误？ （获取请求）

Question

我在 useEffect() 中向 API 发出 get 请求。当我从主页导航到该页面时，它加载正常，但是一旦我刷新页面http://localhost:3000/coins/coin，我就会得到一个Unhandled Runtime Error: Error: Network Error。

export async function getServerSideProps({ query }) {
  const id = query;
  return {
    props: { data: id },
  };
}

function index({ data }) {
  const coinURL = data.id; // bitcoin
  const apiEndpoint = `https://api.coingecko.com/api/v3/coins/${coinURL}`;
  const [currentUser, setCurrentUser] = useState();
  const [coinData, setCoinData] = useState([]);

  useEffect(() => {
    const getData = async () => {
      const res = await axios.get(apiEndpoint);
      const { data } = res;
      setCoinData(data);
    };
    const getCurrentUser = async () => {
      const res = await axios.get(
        `http://localhost:5000/api/users/${session?.id}`
      );
      const { data } = res;
      setCurrentUser(data);
    };
    getData();
    getCurrentUser();

  }, [coinData, currentUser]);
}

为什么会这样？

Answer 1

我建议这样做：

const getData = async () => {
    try {
        const res = await axios.get(apiEndpoint);
        const { data } = res;
        setCoinData(data);
    } catch(err) {
        console.log(err)
    }
};

const getCurrentUser = async () => {
    try {
        const res = await axios.get(
            `http://localhost:5000/api/users/${session?.id}`
        );
        const { data } = res;
        setCurrentUser(data);
    } catch(err) {
        console.log(err)
    }
};

useEffect(() => {
    getData();
    getCurrentUser();
  }, [coinData, currentUser]);

如果这样做，您将能够查看确切的错误并进行修复。