React.js中如何根据AJAX请求返回结果动态渲染电影卡片组件

修正后的完整可运行代码 #

import React, { useState, useEffect } from 'react';
// 原有其他引入（NavBar、MovieCard、样式文件等）保持不变即可

const getlist = async () => {
  const res = await fetch('http://localhost:3001/customize');
  // 修复原代码变量名不匹配错误：原定义变量为res，错误调用了response
  const data = await res.json();
  return data;
};

export default function Index() {
  // 用state存储动态请求的电影列表，初始为空数组避免渲染报错
  const [movieList, setMovieList] = useState([]);
  // 可选：增加加载、错误状态优化用户体验
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    // 组件挂载时发起异步请求
    const fetchData = async () => {
      try {
        const result = await getlist();
        setMovieList(result);
        setLoading(false);
      } catch (err) {
        setError('电影列表加载失败，请稍后重试');
        setLoading(false);
        console.error('请求异常：', err);
      }
    };
    fetchData();
  }, []); // 空依赖数组保证仅在组件首次挂载时发起一次请求

  if (loading) return <div>加载中...</div>;
  if (error) return <div>{error}</div>;

  return (
    <>
      <main className={parentstyle.main_container}>
        <NavBar />
        <div className={style.searchbar_container}>
          <SearchBar />
        </div>
        <div className={style.card_container}>
          {/* 修复原代码不存在test变量的错误，替换为请求得到的movieList */}
          {movieList.map((element, i) => {
            return <MovieCard movieName={element} key={i} />;
          })}
        </div>
      </main>
    </>
  );
}

核心修改说明 #

• 引入useState和useEffect两个React内置钩子：useState用于存储请求返回的动态电影列表数据，useEffect用于控制请求发起时机，避免重复触发请求。
• 修复原getlist函数的两处错误：修正变量名不匹配问题，删除递归调用自身导致的死循环代码，调整为直接返回请求到的接口数据。
• 移除硬编码的list数组，替换为请求后自动更新的movieList状态值渲染卡片组件。
• 补充了基础的加载、异常状态处理，避免页面空白或直接抛出运行时错误。

补充提示 #

如果你的接口返回的是包含电影信息的对象数组（格式示例：[{id:1, name:'dexter', poster:'xxx.jpg'}]），可自行调整取值逻辑，比如将movieName={element}改为movieName={element.name}，同时建议把key替换为接口返回的唯一ID（如key={element.id}），渲染性能比使用数组索引更优。

内容的提问来源于stack exchange，提问作者Moe Mousavi