Почему props сначала undefined?

components/recomended/Recommended

import React, {Component} from 'react';

import CatsFilterHome from '../../containers/CatsFilterHome';
import RecommendedList from '../../containers/recommended/RecommendedList';

class Recommended extends Component {
    componentWillMount(){
        const { setProducts } = this.props;
        axios.get(`/api/products`)
            .then(response => {
                setProducts(response.data);
            });
    }

    render(){
        const {productsList, categories} = this.props.products;
        const {categoriesRelationship} = this.props;

        return (
            <div className="recommended">
                <CatsFilterHome categories={categories}/>

                <RecommendedList productsList={productsList}
                                 categories={categories}
                                 categoriesRelationship={categoriesRelationship}
                />

            </div>
        );
    }
}
export default Recommended;

containers/Recommended.js

import {connect} from 'react-redux';
import {setProducts} from '../../actions/products';
import {setFilter} from '../../actions/filter';
import Recommended from '../../components/recomended/Recommended';

function getCategoryProductRelations(categoriesRelationship){
    let newRelations = [];

    if ( categoriesRelationship !== undefined ) {
        for(let i=0;i<categoriesRelationship.length;i++) {
            let o = categoriesRelationship[i];
            if (!newRelations[o.catFilterBy]) newRelations[o.catFilterBy] = [];
            newRelations[o.catFilterBy].push(o.productID);
        }
    }
    return newRelations;
}

const mapStateToProps = ({ products }) => ({
    products: products.items,
    categoriesRelationship: getCategoryProductRelations( products.items.categoriesRelationship ),
    isReady: products.isReady,
});

const mapDispatchToProps = dispatch => ({
    setProducts: products => dispatch(setProducts(products)),
    setFilter:   filter   => dispatch(setFilter(filter)),
});

export default connect(mapStateToProps, mapDispatchToProps)(Recommended);

containers/CatsFilterHome

import {setFilter} from "../actions/filter";
import {connect} from "react-redux";
import CatsFilterHome from '../components/CatsFilterHome';

const mapStateToProps = ({filter}, ownProps) => ({
    filterBy: filter.filterBy,
    categoriesToShow: ownProps.categories && ownProps.categories.filter(category => category.show_on_homepage == 1),
});

const mapDispatchToProps = dispatch => ({
    setFilter: filter => dispatch(setFilter(filter)),
});

export default connect(mapStateToProps, mapDispatchToProps)(CatsFilterHome);

components/CatsFilterHome

import React from 'react';

const CatsFilterHome = ({categoriesToShow: categories, setFilter, filterBy}) => {
    
    console.log( categories );

    const catFilterBy = filterBy ? filterBy : (categories && categories[0]['category_filter_by']);
    
    return (
        <div className="recommended__cats">
            <ul className="recommended__categoryList">
                {
                    categories && categories.map((catItem, index) => (
                        <li key={'category-key-' + index} className="recommended__categoryItem">
                            <span
                                className={'recommended__categoryItemLink' + (catFilterBy === catItem['category_filter_by'] ? ' active' : '')}
                                onClick={setFilter.bind(this, catItem['category_filter_by'])}
                            >
                                { catItem['category_name'] }
                            </span>
                        </li>
                    ))
                }
            </ul>
        </div>
    );
};

export default CatsFilterHome;

CatsFilterHome

categoriesToShow

const CatsFilterHome = ({categoriesToShow: categories, setFilter, filterBy}) => {

console.log( categories );
...