React Native渲染API数据报错：map函数未定义及movie.title红标问题

1. API返回结构处理错误：TMDB的/movie/popular接口返回的是包含results字段的对象，而非直接的电影数组。你将整个响应对象赋值给movies，导致movies变成普通对象——对象没有map方法，因此触发undefined is not a function错误。
2. 无效的API请求URL：你的apiPath中?和api_key之间存在空格，会导致请求参数解析失败，可能返回异常响应结构，进一步引发问题。
3. movie.title报错根源：当movies被赋值为响应对象后，map遍历的是对象的键名而非电影数据，这些键名没有title属性，因此出现红色报错。

步骤1：修正API请求URL #

去掉?和api_key之间的空格，确保请求参数能被正确解析：

const apiPath = "https://api.themoviedb.org/3/movie/popular?api_key=你的API密钥";

步骤2：正确提取电影数组 #

处理响应时，提取results字段赋值给movies：

useEffect(()=>{
  fetch(apiPath)
  .then(response=>response.json())
  .then(res=>{
    // 确认返回结果包含results字段再赋值，避免异常
    if (res.results) {
      setMovies(res.results);
    }
  })
  .catch(err=> console.log(err))
},[])

步骤3：优化渲染逻辑（推荐） #

React Native中长列表更适合用FlatList而非直接map，性能更优。同时添加加载状态提升体验：

export default function Home() {
const apiPath = "https://api.themoviedb.org/3/movie/popular?api_key=你的API密钥";
const [movies,setMovies]=useState<any[]>([])
const [loading, setLoading] = useState(true);

useEffect(()=>{
  fetch(apiPath)
  .then(response=>response.json())
  .then(res=>{
    if (res.results) {
      setMovies(res.results);
    }
    setLoading(false);
  })
  .catch(err=> {
    console.log(err);
    setLoading(false);
  })
},[])

// 加载中显示指示器
if (loading) {
  return (
    <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
      <ActivityIndicator size="large" />
    </View>
  )
}

return (
  <>
    <StatusBar 
      translucent 
      backgroundColor='transparent' 
    />
    <Container>
      {/* 用FlatList渲染列表 */}
      <FlatList
        data={movies}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({item}) => (
          <Text>{item.title}</Text>
        )}
      />
      <Header/>
    </Container>
  </>
)
}

额外建议 #

避免使用any[]作为movies的类型，建议定义电影数据的TypeScript接口，提升代码健壮性：

interface Movie {
  id: number;
  title: string;
  // 按需添加其他字段，比如poster_path、overview等
}
const [movies,setMovies]=useState<Movie[]>([])

内容的提问来源于stack exchange，提问作者greta calamari