Question

我一直收到此错误。以前可以使用，但是随着时间的流逝，它开始给我带来错误。

我尝试将箭头功能更改为标准功能。我也尝试在不同的应用程序中使用相同的代码，并且行得通。但是由于某种原因，我只会在此应用中收到错误消息。

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;

该api应该呈现该api的新闻数据。

Answer 1

尝试通过

保护代码

if (!this.state.error) {
      return this.state.news.length> 0 && this.state.news.map((item) => (
        <NewSingle key={item.url} item={item} />
      ));

Answer 2

由于error仅在获取后设置，并且您不检查news是否实际保存数据，因此应在渲染中的return之前添加条件，或进行更改将renderItems中的条件设置为if (!this.state.error && (this.state.news && this.state.news.length))。

Answer 3

我认为fetch的工作方式与您期望的不同。即使请求很差，它也不会引发错误，这意味着data.articles有时是不确定的。 fetch根据是否成功设置了response.ok，因此您可以在进行操作之前使用它进行检查。

尝试将您的抓取更改为以下内容：

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
    })
  });

需要指出的另一件事是，newsapi.org需要q=query，因此请确保this.props.news.query包含q=...，或者像下面这样添加： https://newsapi.org/v2/${this.props.news.type}?q=${this.props.news.query}

“ reactjs应用

3 个答案: