使用 React Hooks 多次获取数据 axios - 渲染数据

Question

我正在使用 React 钩子和 axios，基于前面的示例从多个端点获取数据。 不过，我在渲染数据时遇到了麻烦。

我有 forked 一个宝贵的例子，你可以看到这个问题。 有人可以帮忙指出我的 .map() 哪里出了问题...？

谢谢！！

Answer 1

setGitData({ data: respGlobal.data, repos: respGlobal.data });

respGlobal被用在两个地方

{resp.data}

在 JSX 中不起作用，因为它是一个对象并且需要一个字符串

完整的工作示例：

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

import "./styles.css";

const username = "mayankshubham";
function App() {
  const [resp, setGitData] = useState({ data: null, repos: null });

  useEffect(() => {
    const fetchData = async () => {
      const respGlobal = await axios(
        `https://api.github.com/users/${username}`
      );
      const respRepos = await axios(
        `https://api.github.com/users/${username}/repos`
      );

      setGitData({ data: respGlobal.data, repos: respRepos.data });
    };

    fetchData();
  }, []);

  console.log("render");
  if (resp.data) {
    console.log("d", resp.data, resp.repos);
  }

  return (
    <div>
  <h1>Hello </h1>
    <div>{JSON.stringify(resp.data)}</div>
    <br />
    <div>{JSON.stringify(resp.repos)}</div>
  </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);