React组件传参故障求助：App向Home组件传递props失败排查

核心问题1：React Router v6 语法错误 #

你使用的是React Router v6，但仍沿用了v5的render属性传递props——v6中Route组件已移除render、component属性，统一通过element属性渲染组件，传递props需直接在element内的组件上添加。

核心问题2：未更新组件状态 #

getTrending方法请求到数据后，没有将数据同步到state中，导致this.state.movie始终是空数组，即便传递props也无有效数据。

核心问题3：API请求地址错误 #

请求URL里的trending.${mediaType}应为trending/${mediaType}，点号属于拼写错误，会导致请求失败、无法获取数据。

修正后的完整代码 #

import React, { Component } from 'react';
import axios from 'axios';
import { Routes, Route } from 'react-router-dom';
import Navbar from './Navbar'; // 确保组件路径正确
import Home from './Home';
import Movie from './Movie';
import Tv from './Tv';

class App extends Component {
  state = {
    movie: [],
    tv: [],
  }

  getTrending = async (mediaType) => {
    try {
      // 修正URL路径分隔符
      const response = await axios.get(`https://api.themoviedb.org/3/trending/${mediaType}/week?api_key=你的API密钥`);
      // 将请求数据更新到对应状态中
      this.setState({
        [mediaType]: response.data.results // TMDB返回的列表数据在results字段内
      });
    } catch (error) {
      console.error('请求失败:', error);
    }
  }

  componentDidMount() {
    this.getTrending("movie");
    // 如需同时获取tv数据可取消注释
    // this.getTrending("tv");
  }

  render() {
    return (
      <React.Fragment>
        <Navbar />
        <Routes>
          {/* 使用v6语法传递props */}
          <Route path="/home" element={<Home movie={this.state.movie} />} />
          <Route path="/movie" element={<Movie />} />
          <Route path="/tv" element={<Tv />} />
        </Routes>
      </React.Fragment>
    );
  }
}

export default App;

补充说明 #

1. 在Home组件中可直接通过props.movie获取数据：

function Home(props) {
  console.log(props.movie);
  return (
    <div>
      {/* 这里编写movie列表渲染逻辑 */}
    </div>
  );
}

2. 记得将代码中的你的API密钥替换为实际的TMDB API密钥。
3. 添加try/catch捕获请求错误，便于排查问题。

内容的提问来源于stack exchange，提问作者Ahmed Fathy