ZamarShoo
@ZamarShoo
React/Vue, Node/PHP, Wordpress/Drupal

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

Есть класс, в который мы попадаем при роутинге, в 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)
  • Вопрос задан
  • 114 просмотров
Пригласить эксперта
Ответы на вопрос 1
mbelskiy
@mbelskiy
Software Developer
От того что console.log дважды отработал в render, это не значит что компонент был перерисован. Таковы нюансы работы реакта в сборке для разработки. Поэтому ререндеры нужно отлаживать через react dev tools профайлер.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы