Почему при выводе переменных данные не подгружаются?

Question

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

Если в return добавлять переменные, как сейчас, то state пустой. Если переменные убрать, то все идеально грузится

Компонент с проблемой:

class FoodPage extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        this.props.loadOneFoodPost(this.props.match.params.id)
    }

    render() {
        return(
            <>
                <p>{this.props.post.title}</p>
            </>
        )
    }
}

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

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

Action:

export const loadOneFoodPost = (id) => async (dispatch) => {
    await dispatch(loadAllFoodItems());
    await dispatch({type: LOAD_ONE_FOOD_POST, payload: {id}})
    await dispatch({type: LOAD_AUTHOR_INFO})
    await dispatch({type: ADD_AUTHOR_INFO})
    dispatch({type: LOAD_ANOTHER_AUTHOR_POST})
}

Answer 1

[Владимир]

В консоли ошибки смотрел?
Там наверняка что то вроде "не могу прочитать поле тайтл потому что post undefined"
<p>{this?.props?.post?.title}</p>

Comments

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

конечно post is undefined, state же пустой. В этом и вопрос, что если выводить переменные, то он пуст, если стереть, то не пустой и все работает прекрасно (только выводить как), в этом и вопрос

[Владимир]

Иван Шульга,
Читай про жизненный цикл и думай. Вот тебе ьыстрое решение, а понять почему так происходит попробуй сам
<p>{this?.props?.post?.title}</p>
https://developer.mozilla.org/en-US/docs/Web/JavaS...
https://reactjs.org/docs/state-and-lifecycle.html