如何基于 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.js 中渲染视图,直到 $.get() 完成?