React Native无法通过FlatList或自定义组件展示TMDB API数据

1. 自定义组件无法显示的原因与修复 #

你调用自定义组件时传递的props是movie={movie}，但组件内部直接读取props.title——这是错误的，title是嵌套在movie对象中的属性，并非直接在props根层级。

修复后的自定义组件代码： #

import React from 'react';
import { Text, View } from 'react-native';

function ShowMoviesV2(props) {
  // 方式1：直接读取嵌套属性
  return (
    <View>
      <Text>{props.movie.title}</Text>
    </View>
  );

  // 方式2：解构props简化代码
  // const { movie } = props;
  // return (
  //   <View>
  //     <Text>{movie.title}</Text>
  //   </View>
  // );
}

export default ShowMoviesV2;

调用组件的代码保持不变，注意添加key属性避免React警告：

{moviesList ? (
  moviesList.map((movie) => <ShowMoviesV2 movie={movie} key={movie.id} />)
) : (
  <Text>Loading</Text>
)}

2. FlatList无法正常显示的原因与修复 #

FlatList存在两个问题：

• renderMovies中传递的props参数名是movies={item}，但自定义组件接收的是movie（单数），参数名不匹配；
• 组件内部未正确读取嵌套的title属性。

修复后的FlatList相关代码： #

首先修正renderMovies的props传递：

const renderMovies = ({ item }) => <ShowMoviesV2 movie={item} />;

确保自定义组件已按上述方式修复（读取props.movie.title）。

另外建议给useState设置初始空数组，避免数据未加载时触发报错：

// 初始值设为[]，而非undefined
const [moviesList, setMoviesList] = useState([]);

最终可用的FlatList代码： #

<FlatList
  data={moviesList}
  keyExtractor={(item) => String(item.id)}
  renderItem={renderMovies}
  ListEmptyComponent={<Text>Loading</Text>}
/>

额外优化建议 #

你的getNowPlayingMovies函数混合使用了await和.then()，建议统一写法并添加错误捕获：

const getNowPlayingMovies = async () => {
  try {
    const result = await axios.get(
      'https://api.themoviedb.org/3/movie/now_playing?api_key=<api_key>&language=en-US&page=1'
    );
    setMoviesList(result.data.results);
  } catch (error) {
    console.error('获取数据失败：', error);
  }
};

内容的提问来源于stack exchange，提问作者en garcon