Как вывести на экран данные от источника json, через метод fetch в react js?

Question

import React, {useState} from "react";

const CardsClient = () => {
  const [cards, setCards] = useState([]);

  fetch('https://project-2be95-default-rtdb.europe-west1.firebasedatabase.app/executors.json')
    .then((response) => {
      response.json()
        .then((json) => {
          setCards(json)
          console.log(json)
        })
    })

  return ( <div> 
    {Object.keys(cards).map((e) => {
      return ( <h1 key = {e.id}>{e} < /h1>)
    })} 
    </div>
  )
}
export default CardsClient;

Answer 1

Как вывести на экран данные от источника json, через метод fetch в react js?

Например вот так...

const url = 'https://project-2be95-default-rtdb.europe-west1.firebasedatabase.app/executors.json'
//
function App() {
  const [cards, setCards] = React.useState({})
  React.useEffect(_ => {
    fetch(url)
      .then(res => res.json())
      .then(res => setCards(res))
      .catch(console.log)
  })
  return <ul>
    {Object.keys(cards).map(k => <Item key={k} data={cards[k]} ttl={k} />)}
  </ul>
}
//
function Item({data, ttl}) {
  return <li>
    {ttl}
  </li>
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

<div id="like_button_container"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

БЛОГ НА HUSL

Как вывести на экран данные от источника json, через метод fetch в react js?

Ответы (1 шт):