在ReactJS应用中“ TypeError：无法读取未定义的属性'map'”

Question

I keep getting this error. It worked previously, but over time it started giving me the error.

I tried changing the arrow function into a standard function. I also tried using the same code in a different app, and that worked. But for some reason I only get the error in this app.

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;

The api is supposed to render news data from the api.

Answer 1

Try protecting the code by

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

I don't think fetch works the way you are expecting. Even on a bad request it will not throw an error, meaning data.articles will sometimes be undefined. fetch sets response.ok depending on if it was successful, so you can use that to check before proceeding.

Try changing your fetch to something like this:

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

Another thing to point out, newsapi.org requires q=query so make sure this.props.news.query includes q=... , or add it before like: https://newsapi.org/v2/${this.props.news.type}?q=${this.props.news.query}