Как предотвратить рендеринг компонента дочерним элементом до получения данных

У меня есть компонент Dashboard, который отображает массив карточек с данными, полученными с внутреннего сервера. Пользователи могут создавать дополнительные карточки, отправляя форму, которая затем перенаправляет их обратно на страницу панели инструментов.

Моя проблема заключается в том, что при отправке формы возникает ошибка javascript «невозможно прочитать свойство «включает» из неопределенного», и панель инструментов не отображается. Если я вручную обновлю страницу, список отобразится, как и ожидалось, с новой карточкой. Я использую метод Array.includes для фильтрации карт на основе значения состояния filterText. Эта ошибка возникает из-за того, что данные не были получены при вызове рендеринга? Если да, то как я могу заставить компонент ждать, пока не появятся данные перед рендерингом? Пожалуйста, смотрите компоненты и избыточное действие ниже.

const CardList = (props) =>  {

    const cards = props.cards.map(({ _id, title}) => {
            return (
                <Card key={_id} title={title} />
            )
        });

        return (
            <div className="container">
                <input onChange={ (e) => props.handleChange(e.target.value) } />
                <div className="row">
                    {cards}
                </div>
            </div>
        );
} 
export default CardList;

export class Dashboard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            filterText: ''
        }
    }
    componentDidMount() {
        this.props.fetchCards();
    } 

    handleChange = (filterText) => {
        this.setState({filterText});
    }

    render() {
        const cardList = this.props.cards.filter(card => 
            card.title.includes(this.state.filterText.trim().toLowerCase())
        );
        return (
            <div>
                <CardList cards={cardList}
                    handleChange={filterText => this.handleChange(filterText)} />
            </div>
        );
    }
};
function mapStateToProps({ cards: { cards }}) {
    return {
        cards,
    }
}
export default connect(mapStateToProps, {fetchCards})(Dashboard);

export class SurveyForm extends Component {
render() {
        return (
            <div>
               <form>
                 <Field component={CardField} type="text" 
                     label={'title'} name={'title'} key={'title'} />
                 <Button type="submit" onClick={() => submitCard(formValues, history)}>Next</Button>
               </form>
            </div>
        );
    }
}
REDUX ACTION DISPATCHER:
export const submitCard = (values, history) => async dispatch => {
    const res = await axios.post('/api/cards', values);

    try {
        dispatch({ type: SUBMIT_CARD_SUCCESS, payload: res.data });
        dispatch({ type: FETCH_USER, payload: res.data })
    }
    catch(err) {
        dispatch({ type: SUBMIT_CARD_ERROR, error: err });
    }

    history.push('/cards');
}