javascript - 如何使用 useState 设置对象数组的状态？

Question

我正在 React 中构建一个电影应用程序，并为此使用 TMDB 的 api。我对功能组件完全陌生，并且有一些疑问。首先，我使用一个 api 获取所有类型，然后逐一迭代这些类型并调用另一个 API 来获取该类型的 20 部电影。

最终数据应如下所示:

[{
    genre: 'action',
    movies: [],
},
{
    genre: 'adventure',
    movies: [],
}]

这样我就可以迭代上面的对象数组并显示类型及其相应的电影。

现在，我被下面的代码困住了。

const [movieData, setMovieData] = useState([]);

const fetchGenres = async () => {

    const url = `https://api.themoviedb.org/3/genre/movie/list?api_key=xxx&language=en-US`;
    
    try {
      const res = await fetch(url);
      const data = await res.json();
      setMovieData(data.genres);      
    } catch (err) {
      console.error(err);
    }
}

现在，进入查询阶段，

1. 现在，movieData 是一个数组，仅包含流派。如何添加电影并将其更改为对象数组？
2. 如何迭代流派并在 movieData 中设置相应的电影？
3. 还有其他简单/高效的方法吗？

非常感谢解决方案!

Answer 1

在我看来，最好单独保存数据。我的意思是一系列的流派和一系列的电影。所以你将拥有:

const [genres, setGenres] = useState([]);
const [movies, setMovies] = useState([]);

然后您进行异步调用以获取流派并将其设置为状态:

const fetchGenres = async () => {
    const url = `https://baseurl/3/genre/movie/list?api_key=token&language=en-US`;

    try {
        const res = await fetch(url);
        const data = await res.json();
        setGenres(data.genres);
    } catch (err) {
        console.error(err);
    }
};


React.useEffect(()=>{
    fetchGenres();
},[]);

要了解流派的设置，您可以创建一个效果，每次流派更改时该效果都会更新:

async function fetchMovies() {
    let result = [];

    for (const genre of genres) {
        const url = `https://baseurl/3/discover/movie?api_key=token&with_genres=${genre.id}`;
        const res = await fetch(url);
        const { results } = await res.json();

        result = [...result, ...results];
    }

    setMovies(result);
}

React.useEffect(() => {
    fetchMovies();
}, [genres]);

最后我们可以使用React.useMemo根据类型和电影来计算我们需要的结果数组，每次内部参数之一发生变化时都会重新计算:

const resultArray = React.useMemo(() => {
    return genres.map(genre => ({
        genre,
        movies: movies.filter((movie) => movie.genre_ids.includes(genre.id))
    }));
}, [genres, movies])

我相信你会得到这样的数组

[{
    genre: 'action',
    movies: [],
},
{
    genre: 'adventure',
    movies: [],
}]