Многократное извлечение данных с помощью React Hooks - рендеринг данных - PullRequest
1 голос
/ 12 октября 2019

Я использую ловушки и аксиумы React, основанные на предыдущем примере, для извлечения данных из нескольких конечных точек. У меня проблемы с рендерингом данных.

Я раздвоил драгоценный пример, где вы можете увидеть проблему. Может кто-нибудь помочь и указать, где я ошибаюсь с .map () ...?

Спасибо !!

1 Ответ

0 голосов
/ 12 октября 2019
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);
...