[英]Check the render method of `News`. i am getting this error in reactjs
this is a code in react js and when i try to run it is giving error这是 React js 中的代码,当我尝试运行它时出现错误
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。 You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。
especially it is showing this line in the code特别是它在代码中显示了这一行
see the image for error查看图片是否有错误
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)=> {
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()=>{
let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&apiKey=561578a70b89478abce79fddfeae432b&page=${this.state.page - 1}&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()=>{
if(this.state.page + 1 > Math.ceil(this.state.totalResults/20)){}
else{
let url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&apiKey=561578a70b89478abce79fddfeae432b&page=${this.state.page + 1}&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}&category=${this.props.category}&apiKey=561578a70b89478abce79fddfeae432b&page=1&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 (
<div className='container my-3'>
<h1 className="text-center morn">StarNews-Top Headlines</h1>
{ this.state.loading && <Spinner />}
<div className="row">
{!this.state.loading && this.state.articles.map((elements)=>{
return (
<div className="col-md-4" key = {elements.url}>
<NewsItem source={elements.source.name} author={elements.author} time={elements.published} title={elements.title} description={elements.description} imageurl={elements.urlToImage} newsurl={elements.url}/>
</div>
)
})}
</div>
<div className="container d-flex justify-content-between">
<button disabled={this.state.page<=1} type="button" className="btn btn-danger" onClick={this.handlePrevClick}>← previous</button>
<button disabled={this.state.page + 1 > Math.ceil(this.state.totalResults/20)} type="button" className="btn btn-danger" onClick={this.handleNextClick}>next →</button>
</div>
</div>
)
}
}
The error you're getting is about the way you import/export components in your project.您遇到的错误与您在项目中导入/导出组件的方式有关。 One of these (or both) two components:
NewsItem
& Spinner
are imported incorrectly.这些(或两者)两个组件之一:
NewsItem
和Spinner
导入不正确。
There are two ways of exporting: default or not.有两种导出方式:默认或不导出。 A default exported component is imported as:
import Spinner from "./Spinner";
默认导出的组件导入为:
import Spinner from "./Spinner";
and normal exported component as: import { NewsItem } from "./NewsItem";
和正常导出的组件为:
import { NewsItem } from "./NewsItem";
. .
So check both of the exports of these components to figure out where the error comes from.因此,检查这些组件的两个导出以找出错误来自何处。
Good luck!祝你好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.