Question

我是ReactJS的新手，刚开始做一个项目投资组合项目。
当我运行该程序时，它在编辑器中没有显示任何错误，但在浏览器中显示了以下错误。

错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。您可能忘记了从定义文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查HomePage的呈现方法。

这是我的 HomePage.js

import React from 'react';

import Hero from '../components/Hero';
import Carousel from '../components/Carousel';

function HomePage(props) {

    return(
        <div>
            <Hero title={props.title} subTitle={props.subTitle} text={props.text} />
            <Carousel />
        </div>
    );

}

export default HomePage;

Hero.js

import React from 'react';
import Jumbotron from 'react-bootstrap/Jumbotron';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

function Hero(props) {

    return(
        <Jumbotron className="bg-transparent jumbotron-fluid p-0">
            <Container fluid={true}>
                <Row className="justify-content-center py-5">
                    <Col md={8} sm={12}>
                        { props.title && <h1 className="display-1 font-weight-bolder">{props.title}</h1> }
                        { props.subTitle && <h3 className="display-4 font-weight-light">{props.subTitle}</h3> }
                        { props.text && <h3 className="lead font-weight-light">{props.text}</h3> }
                    </Col>
                </Row>
            </Container>
        </Jumbotron>
    );

}
export default Hero;

Carousel.js

import React from 'react';

import Card from '../components/Card';

import pose1 from '../assets/images/pose1.jpg';
import pose2 from '../assets/images/pose2.jpg';
import pose3 from '../assets/images/evverest.jpg';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';

class Carousel extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            items: [
                {
                    id: 0,
                    title: 'Dev Grub',
                    subTitle: 'The cookbook for developers',
                    imgSrc: pose1,
                    link: 'https://devgrub.com',
                    selected: false
                },
                {
                    id: 1,
                    title: 'Garrett Love',
                    subTitle: 'YouTube channel',
                    imgSrc: pose2,
                    link: 'https://www.youtube.com/channel/UCxSITxL2JbF229OGCqieVZw',
                    selected: false
                },
                {
                    id: 2,
                    title: 'Evverest',
                    subTitle: 'A social network for developers',
                    imgSrc: pose3,
                    link: 'https://github.com/garrettlove8/evverest',
                    selected: false
                },
            ]
        }
    }


    handleCardClick = (id, card) => {

        let items = [...this.state.items];

        items[id].selected = items[id].selected ? false : true;

        items.forEach(item => {
            if(item.id !== id) {
                item.selected = false;
            }
        });

        this.setState({
            items
        });
    }


    makeItems = (items) => {
        return items.map(item => {
            return <Card item={item} click={(e => this.handleCardClick(item.id, e))} key={item.id} />
        })
    }


    render() {
        return(
            <Container fluid={true}>
                <Row className="justify-content-around">
                    {this.makeItems(this.state.items)}
                </Row>
            </Container>
        );
    }

}

export default Carousel;

进口绝对正确。如何解决此错误？

输出/控制台：

Answer 1

如果您提供的代码完整，则表明您没有在Hero.js文件中导出任何内容。

添加

export default Hero

最后Hero.js，应该可以解决问题。

Answer 2

我认为问题在于您正在将道具传递给// The back-end const [researchTags, setResearchTags] = useState('') const tags = researchTags.split(',') // The render <div className='research'> <input placeholder='Recherches (tags)' value={researchTags} onChange={(e) => setResearchTags(e.target.value)}></input> {post.map((x, i) => ( <div> {tags.forEach(element => { return element })[i].includes(x[7]) ? <h1>Article with the same tags : {x[0]}</h1> : null } </div> )) } </div>，但是也许您没有任何道具，或者您的道具是一个对象，即HomePage.js，而您却说错了：{{1 }}，而不是heroText={props.heroText}。

您要传递给props.title的道具是什么？

错误：元素类型无效：期望使用字符串（对于内置组件）或类/函数（对于复合组件），但得到：ReactJS中的对象

2 个答案: