Jak wizualizować wyniki w oparciu o AJAX w react js?

Question 1

Po prostu chcę wizualizacji graficznej na podstawie wyników uzyskanych podczas wywołania ajax.

Obecnie elementy graficzne są wyświetlane na podstawie tej tablicy dysku kodu o nazwie list. Ja po prostu chcę zrobić jego dynamiczny i zastąpić go swoimi danymi ajax.

const getlist = async () => {
  const res = await fetch('http://localhost:3001/customize');
  const data = await response.json();
  getlist();
};

export default function Index() {

  const list = ['dexter', 'bb', 'got'];

  return (
    <>
      <main className={parentstyle.main_container}>
        <NavBar />
        <div className={style.searchbar_container}>
          <SearchBar />
        </div>
        <div className={style.card_container}>
          {test.map((element, i) => {
            return <MovieCard movieName={element} key={i} />;
          })}
        </div>
      </main>
    </>
  );
}

Question 2

Użyj haka useState, aby dostosować stan składnika (lista) i usuwać dane w haku Useefect...

Hak efektów umożliwia skutki uboczne w funkcjonalnych elementach:

Pobieranie danych, ustawienia subskrypcji i ręczna zmiana DOM w składnikach React-to wszystko przykłady skutków ubocznych. Niezależnie od tego, przyzwyczajeni czy można nazywać operacje te "skutki uboczne" (lub po prostu "efektów"), prawdopodobnie wykonywali je w swoich składnikach wcześniej.

import { useEffect, useState } from "react"

const getlist = async () => {
  const res = await fetch("http://localhost:3001/customize")
  if (!res.ok) {
    throw new Error(`${res.status}: ${await res.text()}`)
  }
  return res.json()
}

const Index = () => {

  const [ list, setList ] = useState([]) // start with an empty array

  useEffect(() => {
    getList()
      .then(setList)
      .catch(console.error)
  }, []) // empty dependencies array, this runs only once

  return (
    // ...

    {list.map((element, i) => (
      <MovieCard movieName={element} key={i} />
    ))}

    // ...
  )
}

export default Index

Phil · Answer 1 · 2021-11-22T23:19:15

Użyj haka useState, aby dostosować stan składnika (lista) i usuwać dane w haku Useefect...

Hak efektów umożliwia skutki uboczne w funkcjonalnych elementach:

Pobieranie danych, ustawienia subskrypcji i ręczna zmiana DOM w składnikach React-to wszystko przykłady skutków ubocznych. Niezależnie od tego, przyzwyczajeni czy można nazywać operacje te "skutki uboczne" (lub po prostu "efektów"), prawdopodobnie wykonywali je w swoich składnikach wcześniej.

import { useEffect, useState } from "react"

const getlist = async () => {
  const res = await fetch("http://localhost:3001/customize")
  if (!res.ok) {
    throw new Error(`${res.status}: ${await res.text()}`)
  }
  return res.json()
}

const Index = () => {

  const [ list, setList ] = useState([]) // start with an empty array

  useEffect(() => {
    getList()
      .then(setList)
      .catch(console.error)
  }, []) // empty dependencies array, this runs only once

  return (
    // ...

    {list.map((element, i) => (
      <MovieCard movieName={element} key={i} />
    ))}

    // ...
  )
}

export default Index

Jak wizualizować wyniki w oparciu o AJAX w react js?

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii