如何基于 AJAX 渲染导致 react js？答案

【问题标题】：How to render based on AJAX result in react js?如何基于 AJAX 渲染导致 react js？
【发布时间】：2022-01-01 11:41:55
【问题描述】：

只想根据来自 ajax 调用的结果来渲染电影卡。

目前，电影卡组件是基于名为 list 的硬编码数组呈现的。我只是想让它动态化并用我的 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>
    </>
  );
}

【问题讨论】：

最简单的解决方案可能是使用SWR library，它提供了一个useSWR() 钩子，可以为您完成这种简单的数据获取。（这个例子几乎就是你要找的：swr.vercel.app/examples/basic）
List 需要 useState 来存储列表数据，然后对于初始调用，您必须使用 useEffect 调用 getList 并将数据设置到列表
根据数据进行渲染，数据到达时简单的用ajax结果更新。

标签： javascript reactjs ajax fetch-api react-functional-component

【解决方案1】：

使用useState 挂钩设置您的组件状态（列表）并在useEffect 挂钩中获取数据...

Effect Hook 让您可以在函数组件中执行副作用：

数据获取、设置订阅以及手动更改 React 组件中的 DOM 都是副作用的示例。无论您是否习惯将这些操作称为“副作用”（或仅称为“效果”），您之前都可能在组件中执行过它们。

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

【讨论】：