我正在学习ReactJS，正在尝试从API获取数据，数据已加载，但是在MovieRow.js中使用“ items.results”时，出现以下错误：
*未捕获的TypeError：无法读取未定义的属性“结果”。
*警告：列表中的每个孩子都应该有一个唯一的“关键”道具。
**
Tmdb.js
const API_KEY = '********************';
const API_BASE = 'https://api.themoviedb.org/3';
const basicFetch = async (endpoint) => {
const req = await fetch(`${API_BASE}${endpoint}`);
const json = await req.json();
return json;
}
export default {
getHomeList: async () => {
return [
{
slug: 'originais',
title: 'Originais do Netflix',
items: await basicFetch(`/discover/tv?with_network=213&language=pt-BR&api_key=${API_KEY}`)
},
{
slug: 'trending',
title: 'Recomendados para você',
items: await basicFetch(`/trending/all/week?language=pt-BR&api_key=${API_KEY}`)
},
{
slug: 'toprated',
title: 'Em Alta',
items: await basicFetch (`/movie/top_rated?language=pt-BR&api_key=${API_KEY}`)
},
{
slug: 'action',
title: 'Ação',
items: await basicFetch (`/discover/movie?with_genres=28&language=pt-BR&api_key=${API_KEY}`)
},
{
slug: 'comedy',
title: 'Comédia',
items: await basicFetch (`/discover/movie?with_genres=35&language=pt-BR&api_key=${API_KEY}`)
},
{
slug: 'horror',
title: 'Terror',
itens: await basicFetch (`/discover/movie?with_genres=27&language=pt-BR&api_key=${API_KEY}`)
},
{
slug: 'romance',
title: 'Romance',
itens: await basicFetch (`/discover/movie?with_genres=10749&language=pt-BR&api_key=${API_KEY}`)
},
{
slug: 'documentary',
title: 'Documentários',
itens: await basicFetch (`/discover/movie?with_genres=99&language=pt-BR&api_key=${API_KEY}`)
},
];
}
}MovieRow.js
import React from 'react';
import './MovieRow.css';
export default ({title, items}) => {
return(
<div>
<h2>{title}</h2>
<div className='movieRow--listarea'>
{items.results.length > 0 && items.results.map((item, key)=> (
<img src={`https://image.tmdb.org/t/p/w300${item.poster_path}`}/>
))}
</div>
</div>
);
}**
App.js
import React, { useEffect, useState } from 'react';
import Tmdb from './Tmdb';
import MovieRow from './components/MovieRow';
export default () => {
const [movieList, setMovieList] = useState([]);
useEffect(() => {
const loadAll = async () => {
let list = await Tmdb.getHomeList();
setMovieList(list);
}
loadAll();
}, []);
return (
<div className='page'>
<section className='lists'>
{movieList.map((item, key)=>(
<MovieRow key={key} title={item.title} items={item.items}/>
))}
</section>
</div>
);
}出现未定义的错误是由于关键字段中的错字。
itens代替items。
为了安全起见，请始终检查未定义的情况，
您可以使用如下所示的可选链接。
{items?.results?.map((item, key)=> (
<img key={key} src={`https://image.tmdb.org/t/p/w300${item.poster_path}`}/>))}
阅读更多-https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining
对于唯一键警告，如果从响应中获得唯一键是更好的选择，请为image标签设置唯一键。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句