Question

我是React JS的新手，了解它我正在尝试在newsapi.org的帮助下创建一个新闻应用程序。我列出了登录页面上的所有新闻来源以及点击其中一个新闻来源，我想重定向到特定于该来源的链接并显示该来源的所有新闻。

我正在使用react-router进行路由。我正在尝试为每个新闻来源创建一个链接，但是当我使用链接组件时，我收到以下错误

未捕获（在promise中）错误：元素类型无效：期望字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。请检查NewsItem的呈现方法。

warning.js：36警告：React.createElement：type无效 - 期望一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：undefined。您可能忘记从其定义的文件中导出组件。请检查NewsItem的呈现方法。

文件App.js

import React, { Component } from 'react';
import './App.css';
import './Routes.js';
import { Link } from 'react-router';
import NewsList  from './NewsList';
import Header from './Header';

class App extends Component {

    constructor(props) {
       super(props);
       this.state = { sources: [] };
    }

    componentDidMount() {
        fetch('https://newsapi.org/v1/sources?language=en&apiKey=c0f3800ecd5e42f5b1f5bc0e2902bddb')
            .then(result=> result.json())
            .then(json =>  {
                this.setState({sources: json.sources});
                //console.log(this.state.sources); return false;
            });
    }

    render() {

        const sources = this.state.sources;
        // console.log(sources)
        return (

            <div>
                <Header />

                    <NewsList sources={sources} />

            </div>
        )

    }

}

export default App;

Header.js

import React, { Component } from 'react';

export default class Header extends Component {

    render () {

        return (

            <nav className="navbar navbar-inverse navbar-fixed-top">
                <div className="container">
                    <div className="navbar-header">
                        <button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                            <span className="sr-only">Toggle navigation</span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                            <span className="icon-bar"></span>
                        </button>
                        <a className="navbar-brand" href="javascript:void(0)">NEWS SUMO</a>
                    </div>
                </div>
            </nav>


        )

    }


}

NewsList.js

import React, { Component } from 'react';
import NewsItem from './NewsItem';

export default class NewsList extends Component {

    render() {
        //console.log(this.props.sources)
        const {sources} = this.props;
        // console.log(this.sources);
        return (
            <div className="container">
                <div className="row source-list">
                    { sources.map((source, key) => (

                        <NewsItem key={key} source={source}  />

                    ))}
                </div>
            </div>
        )

    }
}

NewsItem.js

import React, { Component } from 'react';
import { Link } from 'react-router';

export default class NewsItem extends Component {

    render() {
        return (
            <div className="col-md-3">
                <Link to={`/news/source/${this.props.source.id}`}>
                    { this.props.source.name }
                </Link>;
            </div>
        );

    }

}

Routes.js

import React, { Component } from 'react';
import NewsItem from './NewsItem';

export default class NewsList extends Component {

    render() {
        //console.log(this.props.sources)
        const {sources} = this.props;
        // console.log(this.sources);
        return (
            <div className="container">
                <div className="row source-list">
                    { sources.map((source, key) => (

                        <NewsItem key={key} source={source}  />

                    ))}
                </div>
            </div>
        )

    }
}

更新

使用react-router-dom而不是react-router解决了这个问题。

未捕获（在承诺中）错误：元素类型无效：期望字符串（对于内置组件）或类/函数

0 个答案: