React项目如何将接口JSON数据映射到表格？求map函数使用指导

修正方案 #

你现在的写法存在两处核心逻辑错误，对应调整即可：

1. 接口返回的根数据中，电影列表存放在results字段下，你当前直接把完整返回的result.data赋值给movies，导致movies并非预期的电影数组，无法遍历。
2. 遍历的时候不需要再重复取movie.results，赋值正确后遍历拿到的每一项就是单个电影对象，直接取对应字段即可。

修正后完整代码：

import { useEffect, useState } from 'react';
import axios from 'axios';

const MovieList = () => {
    const [movies, setMovies] = useState([]);
    useEffect(() => {
    const fetchItems = async () => {
      const result = await axios(
        `api endpoint url`
      )
      // 这里取result.data.results赋值，才是电影列表数组
      setMovies(result.data.results)
    }
    fetchItems()
  }, [])
    
  return (
    // 省略表头代码
    <tbody>
      {movies.map(movie => (
        // 给tr加唯一key，避免React列表渲染警告，没有id的话可以替换为其他唯一字段
        <tr key={movie.id}>
            <td>{movie.year}</td>
            <td>{movie.title}</td>
            <td>{movie.director}</td>
            <td>{movie.rating}</td>
            <td>{movie.duration}</td>
            {/* 上面的字段按照你实际接口返回的属性名替换即可 */}
        </tr>
      ))}
    </tbody>
  )
}
export default MovieList;

补充注意点 #

可以在movies.map前加可选判断movies?.map，避免接口请求未完成时的空值报错。

内容的提问来源于stack exchange，提问作者Simon S.