使用 React Hooks 的多个获取数据公理 - 渲染数据

Question

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

我已经分叉了一个宝贵的示例，您可以在其中看到问题。 有人可以帮忙并指出我在 .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);