简体   繁体   English

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

[英]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}>&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>
        )
    }
}

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.这些(或两者)两个组件之一: NewsItemSpinner导入不正确。

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.

相关问题 未捕获的错误:`dangerouslySetInnerHTML`。 检查reactjs中Checkbox的渲染方法 - Uncaught Error: `dangerouslySetInnerHTML`. Check the render method of Checkbox in reactjs 呈现功能(react.js)出现错误? - Getting error in render function (reactjs)? ReactJs元素类型无效检查render方法 - ReactJs Element type is invalid Check the render method 我在 reactjs 中收到 Html Webpack Plugin 的错误 - I am getting an error of Html Webpack Plugin in reactjs 我正在尝试将定制的新闻提要纳入我的网站,专门用于农业新闻,但是我从门户网站获取一般新闻 - I am trying to incorporate customized news feed in my website specifically for agriculture news only, but I am getting general news from portal 我无法解决此错误:检查 `App` 的渲染方法 - I can't resolve this error : Check the render method of `App` 为什么我变得未定义不是函数,ReactJs - Why am I getting undefined is not a function, ReactJs 我有一个 NodeJS 后端我正在开发与 ReactJS 前端一起工作,但我不断收到 500 错误 - I have a NodeJS backend I am developing to work alongside a ReactJS frontend but I keep getting a 500 error 运行此代码上下文API和Reactjs时出现Render not Function错误 - Getting a Render not Function Error, when I run this Code Context API and Reactjs 状态 ReactJS 和渲染方法 - State ReactJS and render method
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM