компонентDidMount не вызывается, его не работает вообще, кажется - PullRequest
Новая
       67

компонентDidMount не вызывается, его не работает вообще, кажется

2 голосов
/ 31 января 2020

Я перепробовал много вещей. Тот же код работает в моем другом проекте, но не в текущем. 

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 как ну. 1007 введите описание изображения здесь

Найден ответ всем благодаря Michalis Garganourakis и cubrr в приложении. js Я импортировал этот компонент на основе классов "ProductCategory" с фигурными скобками. импорт без фигурных скобок сделал свою работу, так как я экспортирую это как «экспорт по умолчанию»

Еще раз спасибо Михалис Гаргануракис и cubrr

Cubrr ответил на это в самый первый go. мне потребовалось много времени, чтобы понять эту глупость: D: D

1 Ответ

3 голосов
/ 31 января 2020

Судя по добавленному изображению, ошибка возникает в функции render, поэтому componentDidMount никогда не запускается по этой точной причине.

Попробуйте проверить, существует ли this.props.productCategories, прежде чем пытаться используйте .map() на нем. Это должно позволить функции render успешно работать, и затем будет запускаться componentDidMount в соответствии с порядком метода жизненного цикла реакции 

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

Также попробуйте удалить export в ваш первый ряд, сохраняя только export default вашего последнего ряда, где вы также используете connect HO C, например: 

class ProductCategory extends Component { 

// ...

}


export default connect(mapStateToProps, mapDispatchToProps)(ProductCategory)
...