如何基于 AJAX 渲染导致 react js?

Posted

技术标签:

【中文标题】如何基于 AJAX 渲染导致 react js?【英文标题】:How to render based on AJAX result in 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结果更新。 【参考方案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

【讨论】:

以上是关于如何基于 AJAX 渲染导致 react js?的主要内容,如果未能解决你的问题,请参考以下文章

React useState导致渲染循环

如何在 React JS 中渲染之前等待状态?

如何等待在 react.js 中渲染视图,直到 $.get() 完成?

如何在没有要映射的对象数组的情况下在 React.js 中循环和渲染元素?

AJAX 调用 ReactJS 后渲染组件

React:setState 不会导致重新渲染?