Блог

это код в react js, и когда я пытаюсь запустить его, он выдает ошибку

Ошибка: Недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс/функция (для составных компонентов), но получено: не определено. Скорее всего, вы забыли экспортировать свой компонент из файла, в котором он определен, или вы, возможно, перепутали импорт по умолчанию и именованный импорт.

особенно это касается отображения этой строки в коде

смотрите изображение для поиска ошибок

 import React, { Component } from "react"; import NewsItem from "./NewsItem"; import "../App.css"; import Spinner from "./Spinner"; import PropTypes from "prop-types";  export default class News extends Component {  static defaultProps = {  country: "in",  category: "general",  };  static propTypes = {  country: PropTypes.string,  category: PropTypes.string,  };   capitalizeFirstLetter = (string) =gt; {  return string.charAt(0).toUpperCase()   string.slice(1);  };   constructor(props) {  super(props);  console.log("this is the constructor from news component");  this.state = {  articles: [],  loading: false,  page: 1,  };  document.title =  this.capitalizeFirstLetter(this.props.category)   "-StarNews";  }  handlePrevClick = async () =gt; {  let url = `https://newsapi.org/v2/top-headlines?country=${  this.props.country  }amp;category=${  this.props.category  }amp;apiKey=561578a70b89478abce79fddfeae432bamp;page=${  this.state.page - 1  }amp;pageSize=15`;  this.setState({ loading: true });  let data = await fetch(url);  let parseData = await data.json();  this.setState({  page: this.state.page - 1,  articles: parseData.articles,  loading: false,  });  };   handleNextClick = async () =gt; {  if (this.state.page   1 gt; Math.ceil(this.state.totalResults / 20)) {  } else {  let url = `https://newsapi.org/v2/top-headlines?country=${  this.props.country  }amp;category=${  this.props.category  }amp;apiKey=561578a70b89478abce79fddfeae432bamp;page=${  this.state.page   1  }amp;pageSize=15`;  this.setState({ loading: true });  let data = await fetch(url);  let parseData = await data.json();  this.setState({  page: this.state.page   1,  articles: parseData.articles,  loading: false,  });  }  };   async componentDidMount() {  let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}amp;category=${this.props.category}amp;apiKey=561578a70b89478abce79fddfeae432bamp;page=1amp;pageSize=15`;  this.setState({ loading: true });  let data = await fetch(url);  let parseData = await data.json();   this.setState({  articles: parseData.articles,  loading: false,  author: parseData.author,  published: parseData.publishedAt,  });  }   render() {  return (  lt;div className="container my-3"gt;  lt;h1 className="text-center morn"gt;StarNews-Top Headlineslt;/h1gt;  {this.state.loading amp;amp; lt;Spinner /gt;}  lt;div className="row"gt;  {!this.state.loading amp;amp;  this.state.articles.map((elements) =gt; {  return (  lt;div className="col-md-4" key={elements.url}gt;  lt;NewsItem  source={elements.source.name}  author={elements.author}  time={elements.published}  title={elements.title}  description={elements.description}  imageurl={elements.urlToImage}  newsurl={elements.url}  /gt;  lt;/divgt;  );  })}  lt;/divgt;  lt;div className="container d-flex justify-content-between"gt;  lt;button  disabled={this.state.page lt;= 1}  type="button"  className="btn btn-danger"  onClick={this.handlePrevClick}  gt;  amp;larr; previous  lt;/buttongt;  lt;button  disabled={  this.state.page   1 gt; Math.ceil(this.state.totalResults / 20)  }  type="button"  className="btn btn-danger"  onClick={this.handleNextClick}  gt;  next amp;rarr;  lt;/buttongt;  lt;/divgt;  lt;/divgt;  );  } }   

Ошибка, которую вы получаете, связана с тем, как вы импортируете/экспортируете компоненты в своем проекте. Один из этих (или оба) двух компонентов: NewsItem amp; Spinner импортированы неправильно.

Существует два способа экспорта: по умолчанию или нет. Экспортированный компонент по умолчанию импортируется как: import Spinner from "./Spinner"; , а обычный экспортируемый компонент-как: import { NewsItem } from "./NewsItem"; .

Поэтому проверьте оба экспорта этих компонентов, чтобы выяснить, откуда взялась ошибка.

Удачи!