React App：需要建议将 json 数据映射到表中

Question

我必须从 api 获取数据并将其映射到表。这是我的代码。有人可以建议地图功能吗？谢谢。

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`
      )
      setMovies(result.data)
    }
    fetchItems()
  }, [])
    
  return (
    #omit codes for table heads 
          <tbody>
          {movies.map(movie => (
            <tr>
                <td>{movie.results.year}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
                <td>{}</td>
            </tr>
            ))}
          </tbody>
}
export default MovieList;

Answer 1

将电影更新为

setMovies(result.data.results)

然后代替

movies.map()

使用

movies[0].films.map(movie => {})

Answer 2

您的回复似乎是 result 是每年的电影数组（另一个数组）。所以，丑陋的方法就是仔细遍历这些数组，例如：

      {movies.map((movie: any) => {
        movie.results.map((yearData: any) => (
          <tr>
            <td>{yearData.year}</td>
            {yearData.films.map((film: any) => (
              <Fragment>
                <td>{film['Detail URL']}</td>
                <td>{film.Film}</td>
                <td>{film['Producer(s)']}</td>
                <td>{...etc}</td>
              </Fragment>
            ))}
          </tr>
        ));
      })}

但是如果你可以在后端做出更好的响应，或者在前端对结果进行一些预处理，我建议你对按年份分组的电影进行响应，这样会更容易。例如：

[
  { 
    year: '2021',
    films: [{...}]
  },
  { 
    year: '1973',
    films: [{...}]
  },
  { 
    year: '1927 / 28 [A] (1st)',
    films: [{...}]
  },
  ...
]