Sigo recibiendo este error. Funcionó anteriormente, pero con el tiempo comenzó a darme el error.

Intenté cambiar la función de flecha a una función estándar. También intenté usar el mismo código en una aplicación diferente, y funcionó. Pero por alguna razón solo recibo el error en esta aplicación.

import React, { Component } from 'react';
import NewSingle from './NewSingle';
import Error from './Error';

class News extends Component {
  constructor(props) {
    super(props);
    this.state = {
      news: [],
      error: false,
    };
  }

  componentDidMount() {
    const url = `https://newsapi.org/v2/${this.props.news.type}?${this.props.news.query}&apiKey=ae3aff618e7d4b71b666bd9d0b10f053`;

    fetch(url)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        this.setState({
          news: data.articles
        })
      })
      .catch((error) => {
        this.setState({
          error: true
        })
      });
  }

  renderItems() {
    if (!this.state.error) {
      return this.state.news.map((item) => (
        <NewSingle key={item.url} item={item} />
      ));
    } else {
      return <Error />
    }
  }

  render() {
    return (
      <div className="row">
        {this.renderItems()}
      </div>
    );
  }
}

export default News;
import React from 'react';

const NewSingle = ({item}) => (
    <div className='col s4'>
        <div className='card'>
            <div className='card-image'>
                <img src={item.urlToImage} alt={item.title} />
                <span className='card-title'>{item.source.name}</span>
            </div>
            <div className='card-content'>
            <p>{item.title}</p>
            </div>
            <div className='card-action'>
                <a href={item.url} target='_blank' rel="noopener noreferrer">Full article</a>
            </div>
        </div>
    </div>
);

export default NewSingle;

Se supone que la API representa datos de noticias de la API.

-1
S. Gross 9 may. 2019 a las 23:30

3 respuestas

La mejor respuesta

No creo que fetch funcione como esperabas. Incluso en una solicitud incorrecta, no arrojará un error, lo que significa que data.articles a veces será indefinido. fetch establece response.ok dependiendo de si fue exitoso, por lo que puede usarlo para verificar antes de continuar.

Intenta cambiar tu búsqueda a algo como esto:

fetch(url)
  .then((response) => {
    // Add this check and throw an error if it fails
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response.json();
  })
  .then((data) => {
    this.setState({
      news: data.articles
    })
  })
  .catch((error) => {
    this.setState({
      error: true
    })
  });

Otra cosa a destacar, newsapi.org requiere q=query, así que asegúrese de que this.props.news.query incluye q=..., o agréguelo antes como: https://newsapi.org/v2/${this.props.news.type}?q=${this.props.news.query}

1
braza 9 may. 2019 a las 20:59

Dado que error solo se establece después de la búsqueda y no está comprobando si news realmente contiene datos, debe agregar un condicional antes de return en su renderizado, o cambiar el condicional en renderItems a if (!this.state.error && (this.state.news && this.state.news.length)).

1
Yannick K 9 may. 2019 a las 20:37

Intenta proteger el código

if (!this.state.error) {
      return this.state.news.length> 0 && this.state.news.map((item) => (
        <NewSingle key={item.url} item={item} />
      ));
2
ctg 9 may. 2019 a las 20:37