Javascript 组件未调用，它似乎根本不工作

我尝试了很多东西。相同的代码在我的另一个项目中工作，但在当前项目中不工作

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)

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

虽然我反复检查了每一种方法，但我仍然无法解决。

找到答案都要感谢米哈利斯·加加努拉基斯和库伯 在App.js中，我用大括号导入了这个基于类的组件“ProductCategory”。导入不带花括号的文件完成了任务，因为我将其导出为“导出默认值”

再次感谢Michalis Garganourakis和cubrr

---

库伯一开始就回答了这个问题。我花了很多时间才理解这个愚蠢的事情：D:D

根据您添加的图像，错误似乎发生在

render

函数上，因此

componentDidMount

永远不会因为这个确切的原因被触发

在尝试对其使用

.map（）

之前，请尝试检查此.props.productCategories是否存在。这将允许

render

功能成功运行，然后根据react的提示触发

componentDidMount

this.props.productCategories&&this.props.productCategories.map（（pc，i）。。。

此外，请尝试删除第一行的

导出

，仅保留最后一行的

导出默认值

，您还可以使用

连接

HOC，如：

class ProductCategory extends Component { 

// ...

}


export default connect(mapStateToProps, mapDispatchToProps)(ProductCategory)

---

导入此组件时，是否使用

import{ProductCategory}从…

或从…导入ProductCategory？将您的导入语句以及ProductCategory粘贴到MapStateTops是过程中调用的reducer。我已通过console.logUpdate进行了相同的检查。更新帖子，您必须使其对将来来到这里的其他人有用。此外，如果此代码在另一个项目中工作，则很明显，不同之处与周围的设置有关，而不是此处的代码本身……发布更多关于两个项目之间的不同之处的信息。一个项目是否执行SSR？componentDidMount不调用操作，且无操作状态不会更新为“productCategories”仍然是空数组。这就是它显示错误的原因。虽然

componentDidMount

在生命周期的渲染之后出现，但如果渲染功能失败，则在实现此功能后将不会出现

componentDidMount

。getProductCategories不是一个函数：/I已更新我的答案。这应该是由于多个事件造成的谢谢。你是对的。错误是由于多次导出造成的

class ProductCategory extends Component { 

// ...

}


export default connect(mapStateToProps, mapDispatchToProps)(ProductCategory)