ReactJS - 类型错误：obj 未定义

Question

When rendering, I get a TypeError that my object is not defined. But I thought I defined it before using it.

This what my ArticleDetails.js that I am calling looks like.

import React, {Component} from 'react';


class ArticleDetail extends Component {
    render(){
        const obj = this.props.articleDetail;
        return(
            <div style={{ color: "yellow", border: "1px solid yellow" }}>
                <h4>{obj.title}</h4>
                <h4>{obj.body}</h4>
            </div>
        );
    }
}

export default ArticleDetail;

This is the article list that links to article details page.

`class ArticleList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            articlesData: [],
            article: "",
            showComponent: false,
        };
        this.getArticleDetail = this.getArticleDetail.bind(this);
        this.showArticleDetails = this.showArticleDetails.bind(this);
    }


    getArticleDetail(item) {
        axios
            .get('http://localhost:8000/'.concat(item.absolute_url))
            .then((response) => {
                this.setState({ title: response.data});
            })
            .catch(function (error) {
                console.log(error);
            })
    }


    showArticleDetails(item) {
        this.getArticleDetail(item);
        this.setState({ showComponent: true });
    }


    componentDidMount(){
        axios
            .get('http://localhost:8000/')
            .then((response) => {
                this.setState({ articlesData: response.data });
            })
            .catch(function (error) {
                console.log(error);
            })      
    }


    render(){
        return(
            <div>
                {this.state.articlesData.map( item => {
                    return (
                        <h3 key={item.id} onClick={() => this.showArticleDetails(item)}>
                            {item.title}, {item.short_description}
                        </h3>
                    );
                })}

                {this.state.showComponent ? (
                    <ArticleDetail articleDetails={this.state.article} />
                    ) : null}
            </div>
        );
    }
}

export default ArticleList;`

I am a newbie and have not been able to proceed past this. I appreciate all help that will help me make sure that I properly defined "obj." Please ELI5. I am very new to ReactJS.

Answer 1

const obj = this.props.articleDetail and <ArticleDetail articleDetails={this.state.article} />

articleDetail and articleDetails

Do you see the difference in the names? It seems you just missed the s at the end. Try to add.