Почему игнорируется componentDidMount?

Question

[Иван Шульга]

Есть класс, в который мы попадаем при роутинге, в constructor и в render заходит (причем по 2 раза), а вот в методы по типу componentDidMount, componentDidUpdate и тд не заходит. От этого не появляются данные. Почему так?

import React from "react";
import {connect} from "react-redux";
import {loadOneFoodPost} from "../../redux/food-items-reducer";

class FoodPage extends React.PureComponent {

    constructor(props) {
        console.log('constructor')
        super(props);
    }

    componentDidMount() {
        console.log('componentDidMount')
        this.props.loadOneFoodPost(this.props.match.params.id)
    }


    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('componentDidUpdate')
        if (prevState.id !== this.props.match.params.id) {
            this.props.loadOneFoodPost(this.props.match.params.id)
        }
    }

    render() {
        const {post, author, anotherPosts} = this.props
        console.log('render')
        return(
            <>
                <h2>{post.title}</h2>
            </>
        )
    }
}

const mapStateToProps = (state) => ({
    post: state.foodItems.foodPost[0],
    author: state.foodItems.authorInfo[0],
    anotherPosts: state.foodItems.foods
})

export default connect(
    mapStateToProps, {loadOneFoodPost}
)(FoodPage)

Answer 1

[Макс]

От того что console.log дважды отработал в render, это не значит что компонент был перерисован. Таковы нюансы работы реакта в сборке для разработки. Поэтому ререндеры нужно отлаживать через react dev tools профайлер.

componentDidMount вызывается только один раз для каждого экземпляра компонента.

Если не вызывается componentDidUpdate, значит перерисовки не было.