检查 `News` 的渲染方法。 我在 reactjs 中收到此错误

Question

这是 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)=> {
    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}>&larr; previous</button>
<button disabled={this.state.page + 1 > Math.ceil(this.state.totalResults/20)} type="button" className="btn btn-danger" onClick={this.handleNextClick}>next &rarr;</button>
</div>

            </div>
        )
    }
}

Answer 1

您遇到的错误与您在项目中导入/导出组件的方式有关。 这些（或两者）两个组件之一： NewsItem和Spinner导入不正确。

有两种导出方式：默认或不导出。 默认导出的组件导入为： import Spinner from "./Spinner"; 和正常导出的组件为： import { NewsItem } from "./NewsItem"; .

因此，检查这些组件的两个导出以找出错误来自何处。

祝你好运！