如何将Vanilla JS编写的含fetch请求的MovieGrid代码改写为React组件

核心调整逻辑 #

• 用 useState 管理接口返回的电影数据、错误信息、加载状态
• 用 useEffect 在组件挂载时发起fetch请求，避免重复触发接口调用
• 用JSX语法替代原生字符串模板渲染DOM，另外需要注意：TMDB接口返回的data.results是电影数组，你原有原生JS代码中直接取data.results.poster_path的写法存在逻辑问题，会拿不到正确值，需要遍历数组渲染每一项

import { useState, useEffect } from 'react';

// 替换为你实际使用的TMDB接口完整地址
const apiUrl = '你的接口地址';

function MovieGrid() {
  const [movies, setMovies] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchMovies = async () => {
      try {
        const res = await fetch(apiUrl);
        const data = await res.json();
        // 存储接口返回的电影数组
        setMovies(data.results);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
        console.error(err);
      }
    };

    fetchMovies();
  }, []); // 空依赖数组保证仅在组件首次挂载时发起请求

  // 加载状态渲染
  if (loading) return <div>加载中...</div>;
  // 错误状态渲染
  if (error) return <div>请求出错：{error.message}</div>;

  return (
    <ul>
      {movies.map((movie) => (
        <React.Fragment key={movie.id}>
          <li>
            <img 
              src={`https://image.tmdb.org/t/p/w185/${movie.poster_path}`} 
              alt={movie.title}
            />
          </li>
          <li>{movie.title}</li>
        </React.Fragment>
      ))}
    </ul>
  );
}

export default MovieGrid;

补充说明：

1. 如果你的项目使用类组件，可将数据存在this.state中，把请求逻辑放在componentDidMount生命周期钩子中实现即可
2. 可根据业务需求自行调整加载、错误状态的UI展示效果，也可扩展添加分页、搜索筛选等功能

内容的提问来源于stack exchange，提问作者Ray M