我不明白为什么“.map”在这个变量中没有定义

Question

这个 .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;

奇怪的是，这段代码在 localhost 上运行。但是当我上传到 Netlify 时，它会在控制台上返回此错误。请看这张图：Error image in Netlify

Answer 1

问题

这里的问题是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]);