React 18中如何从路由动态设置组件变量的值？

你只需要做几个简单修改，就能让Movielist组件动态接收路由传递的参数：

1. 让Movielist接收组件props #

把Movielist的函数定义改成接收props参数，直接解构出listMovies：

function Movielist({ listMovies }) {
  // 原有代码...
}

2. 移除硬编码的listMovies变量 #

删掉你原来写的let listMovies = 'top_rated';，现在直接使用props传进来的listMovies值。

3. 更新useEffect的依赖数组 #

因为getMovies函数依赖listMovies参数，要把listMovies加入useEffect的依赖数组，这样当路由切换、参数变化时，会自动重新请求对应接口的数据：

useEffect(() => {
  getMovies();
}, [listMovies]) // 这里添加listMovies作为依赖

4. 动态修改页面标题（可选但推荐） #

原来的页面标题是硬编码的“Now Playing”，可以根据listMovies的值动态切换，让页面显示更准确：

// 在组件内部定义标题映射
const pageTitle = listMovies === 'now_playing' ? 'Now Playing' : 'Top Rated';

// 然后在return里替换h1的内容
<h1 className="page-title">{pageTitle}</h1>

修改后的完整Movielist.jsx代码 #

import { useEffect, useState } from 'react';
import axios from 'axios';
import './Movielist.css';
import Moviecard from '../Moviecard/Moviecard';

function Movielist({ listMovies }) {

    const API_URL = 'https://api.themoviedb.org/3';
    const [movies, setMovies] = useState([]);
    const pageTitle = listMovies === 'now_playing' ? 'Now Playing' : 'Top Rated';

    const getMovies = async () => {
        const { data: { results } } = await axios.get(`${API_URL}/movie/${listMovies}`, {
            params: {
                api_key: process.env.REACT_APP_API_KEY
            }
        });

        setMovies(results);
    }

    const displayMovies = () => {
        return movies.map(movie => (
            <Moviecard
                key={movie.id}
                movie={movie}
            />
        ))
    }

    useEffect(() => {
        getMovies();
    }, [listMovies])

    return (
        <>
            <h1 className="page-title">{pageTitle}</h1>
            <div className="row list">
                { displayMovies() }
            </div>
        </>
    );
}

export default Movielist;

你的App.js代码不需要修改，保持原来的路由配置即可，现在切换路由时，Movielist会自动接收对应的参数，请求不同的TMDB接口并展示对应内容。

内容的提问来源于stack exchange，提问作者Razvan Zamfir