TypeError：无法在反应 JS 中读取未定义的属性（读取“地图”）

Question

TypeError: Cannot read properties of undefined (reading 'map') in react JS

 render() {
    return (
        <div className="container my-3">
            <h2 id="swea">News 24/7 - Top '{this.capitalizeFirstletter(this.props.category)}' Headlines </h2>

            {this.state.loading && <Spinner />}

            <div className='rows'>
                {!this.state.loading && this.state.article.map((element) => {
                    return <div className="col-md-4" key={element.url}>
                        <NewsItem title={element.title ? element.title.slice(0, 90) : ""} description={element.description ? element.description.slice(0, 50) : ""} imageUrl={element.urlToImage} newsUrl={element.url} author={element.author} date={element.publishedAt} source={element.source.name} />
                    </div>
                })}
            </div>

            <div className="container d-flex justify-content-between">
                <button type="button" disabled={this.state.page <= 1} className="btn btn-dark" onClick={this.handlePrevClick} >&larr; Previous</button>
                <button type="button" disabled={this.state.page + 1 > Math.ceil(this.state.totalResults / this.props.pageSize)} id="xxx" className="btn btn-info" onClick={this.handleNextClick} >Next &rarr;</button>
            </div>

        </div>
    );
}

}

Here's the error *

Answer 1

Before mapping over this.state.article first check if the state variable is empty. For example:

this.state.article.length?this.state.article.map((item)=>{return item}):null;

Answer 2

Just like cyber said, I was getting through the problem for almost an hour and finally I found the problem is empty variable. I didn't return the result and made my array empty, then I continue get "Cannot read properties of undefined (reading 'map')".Please check your variable.