我不明白为什么“.map”在此变量中未定义
I dont understand why ".map" is undefined in this variable
这个.map对象是未定义的,但我不知道为什么。这一行 "{noticias.map((noticia) => ("
import React from 'react'
import Noticia from './Noticia'
import PropTypes from 'prop-types'
const ListadoNoticias = ({noticias}) =>{
return (
<div className='row'>
{noticias.map((noticia) => (
<Noticia
key={noticia.url}
noticia={noticia}
/>
))}
</div>
)
}
ListadoNoticias.propTypes = {
noticias: PropTypes.array.isRequired
}
export default ListadoNoticias;
“noticias”变量来自这里
import React, {Fragment, useState, useEffect} from 'react'
import Header from './components/Header'
import Formulario from './components/Formulario'
import ListadoNoticias from './components/ListadoNoticias'
function App() {
// Definir a categoria e noticia
const [categoria, guardarCategoria] = useState('') // Esse State guarda a categoria da noticia no hooks
const [noticias, guardarNoticias] = useState([]) // Vai guadar o array de objetos da requisição em formato JSON
useEffect(() => {
const consultarAPI = async () => {
const API = '81673cba4b934873953af1db871a6ac7'
const url = `https://newsapi.org/v2/top-headlines?country=br&category=${categoria}&apiKey=${API}`
const resposta = await fetch(url)
const noticias = await resposta.json()
guardarNoticias(noticias.articles)
}
consultarAPI()
}, [categoria]) // Vai usar esse State para mudar as informações da API
return (
<Fragment>
<Header
titulo='Buscador de Noticias'
/>
<div className='container white'>
<Formulario
guardarCategoria={guardarCategoria}
/>
<ListadoNoticias
noticias={noticias}
/>
</div>
</Fragment>
);
}
export default App;
奇怪的是这段代码在本地主机上运行。但是当我上传到 Netlify 时,控制台上出现 returns 这个错误。请看这张图片:Error image in Netlify
问题
这里的问题是 fetch
正在返回一个错误,而您的响应处理不处理成功的失败响应,即错误的有效响应。在这种情况下,您会收到 426 错误状态代码。
您可能将 noticias
设置为未定义的值。
useEffect(() => {
const consultarAPI = async () => {
const API = '81673cba4b934873953af1db871a6ac7';
const url = `https://newsapi.org/v2/top-headlines?country=br&category=${categoria}&apiKey=${API}`;
const resposta = await fetch(url); // <-- 426 error response
const noticias = await resposta.json();
guardarNoticias(noticias.articles); // <-- articles undefined
}
consultarAPI();
}, [categoria]);
未定义的 noticias
状态被传递给 ListadoNoticias
,您尝试从中映射并抛出错误。
解决方案
您真的应该将 async/await
代码包围在 try/catch
中以处理被拒绝的承诺和其他各种抛出的错误。您还应该检查 successful fetch.
useEffect(() => {
const consultarAPI = async () => {
const API = '81673cba4b934873953af1db871a6ac7';
const url = `https://newsapi.org/v2/top-headlines?country=br&category=${categoria}&apiKey=${API}`;
try {
const resposta = await fetch(url);
if (!resposta.ok) {
throw new Error('Network response was not ok');
}
const noticias = await resposta.json();
guardarNoticias(noticias.articles);
} catch(error) {
// handle fetch failure or any other thrown errors
}
}
consultarAPI();
}, [categoria]);
这个.map对象是未定义的,但我不知道为什么。这一行 "{noticias.map((noticia) => ("
import React from 'react'
import Noticia from './Noticia'
import PropTypes from 'prop-types'
const ListadoNoticias = ({noticias}) =>{
return (
<div className='row'>
{noticias.map((noticia) => (
<Noticia
key={noticia.url}
noticia={noticia}
/>
))}
</div>
)
}
ListadoNoticias.propTypes = {
noticias: PropTypes.array.isRequired
}
export default ListadoNoticias;
“noticias”变量来自这里
import React, {Fragment, useState, useEffect} from 'react'
import Header from './components/Header'
import Formulario from './components/Formulario'
import ListadoNoticias from './components/ListadoNoticias'
function App() {
// Definir a categoria e noticia
const [categoria, guardarCategoria] = useState('') // Esse State guarda a categoria da noticia no hooks
const [noticias, guardarNoticias] = useState([]) // Vai guadar o array de objetos da requisição em formato JSON
useEffect(() => {
const consultarAPI = async () => {
const API = '81673cba4b934873953af1db871a6ac7'
const url = `https://newsapi.org/v2/top-headlines?country=br&category=${categoria}&apiKey=${API}`
const resposta = await fetch(url)
const noticias = await resposta.json()
guardarNoticias(noticias.articles)
}
consultarAPI()
}, [categoria]) // Vai usar esse State para mudar as informações da API
return (
<Fragment>
<Header
titulo='Buscador de Noticias'
/>
<div className='container white'>
<Formulario
guardarCategoria={guardarCategoria}
/>
<ListadoNoticias
noticias={noticias}
/>
</div>
</Fragment>
);
}
export default App;
奇怪的是这段代码在本地主机上运行。但是当我上传到 Netlify 时,控制台上出现 returns 这个错误。请看这张图片:Error image in Netlify
问题
这里的问题是 fetch
正在返回一个错误,而您的响应处理不处理成功的失败响应,即错误的有效响应。在这种情况下,您会收到 426 错误状态代码。
您可能将 noticias
设置为未定义的值。
useEffect(() => {
const consultarAPI = async () => {
const API = '81673cba4b934873953af1db871a6ac7';
const url = `https://newsapi.org/v2/top-headlines?country=br&category=${categoria}&apiKey=${API}`;
const resposta = await fetch(url); // <-- 426 error response
const noticias = await resposta.json();
guardarNoticias(noticias.articles); // <-- articles undefined
}
consultarAPI();
}, [categoria]);
未定义的 noticias
状态被传递给 ListadoNoticias
,您尝试从中映射并抛出错误。
解决方案
您真的应该将 async/await
代码包围在 try/catch
中以处理被拒绝的承诺和其他各种抛出的错误。您还应该检查 successful fetch.
useEffect(() => {
const consultarAPI = async () => {
const API = '81673cba4b934873953af1db871a6ac7';
const url = `https://newsapi.org/v2/top-headlines?country=br&category=${categoria}&apiKey=${API}`;
try {
const resposta = await fetch(url);
if (!resposta.ok) {
throw new Error('Network response was not ok');
}
const noticias = await resposta.json();
guardarNoticias(noticias.articles);
} catch(error) {
// handle fetch failure or any other thrown errors
}
}
consultarAPI();
}, [categoria]);