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);

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

1 个答案: