componentDidMount 没有被调用，它似乎根本不起作用

Question

我尝试了很多东西。相同的代码在我的其他项目中有效，但在当前项目中无效

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import getProductCategories from '../../redux/actions/productCategoryAction'
import "./ProductCategory.css"
export class ProductCategory extends Component {
    static propTypes = {
        productCategories: PropTypes.array.isRequired
    }
    componentDidMount() {
        console.log('Mounted!');
        this.props.getProductCategories();
    }
    render() {
        return (
            <div className="main-card-body">
                <div className="main-card-container">
                    {this.props.productCategories.map((pc, i) => {
                        return (
                            <div key={i} className="main-card-card" >
                                <div className="main-card-face main-card-face1">
                                    <div className="main-card-content">
                                        <img src={pc.image} alt={pc.alt} />
                                    </div>
                                </div>
                                <div className="main-card-face main-card-face2">
                                    <div className="main-card-content">
                                        <h3> {pc.title}</h3>
                                        <p>{pc.description}</p>
                                    </div>
                                </div>
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    productCategories: state.productCategory.productCategories
})

const mapDispatchToProps = dispatch => {
    return {
        getProductCategories: () => {
            dispatch(getProductCategories())
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(ProductCategory)

在没有 mapDispatchToProps 的情况下尝试过：

export default connect(mapStateToProps, {getProductCategories})(ProductCategory)

componentDidMount 失败，没有任何错误，也没有显示 console.log 字符串。

虽然我反复核对了每一种方法，但我仍然无法解决。 enter image description here

感谢 Michalis Garganourakis 和 cubrr 找到了答案在 App.js 中，我使用花括号导入了这个基于 class 的组件 "ProductCategory"。不带花括号导入它就完成了工作，因为我将它导出为 "export default"

再次感谢 Michalis Garganourakis 和 cubrr

Cubrr 在第一时间回答了这个问题。我花了很多时间才理解这个愚蠢的东西 :D :D

Answer 1

根据您添加的图像，错误似乎发生在 render 函数上，因此 componentDidMount 永远不会因为这个确切原因而被触发。

尝试使用 .map() 之前先检查 this.props.productCategories 是否存在。这应该允许 render 函数成功地运行，然后这将根据反应的 lifecycle method order

触发 componentDidMount

this.props.productCategories && this.props.productCategories.map((pc, i) ...

此外，尝试删除第一行的 export，仅保留最后一行的 export default，您还使用了 connect HOC，例如：

class ProductCategory extends Component { 

// ...

}


export default connect(mapStateToProps, mapDispatchToProps)(ProductCategory)

componentDidMount 没有被调用，它似乎根本不起作用

componentDidMount not called, its not working at all it seems

javascript

reactjs

react-router

react-dom

react-redux