setState => Не распространять массив, если он пуст - реагирует

Question

handleCommentChange = (e) => {
    const commentID = idGenerator();
    this.setState({
        movie: {
            movieId: this.props.match.params.id,
            ...this.props.movie,           
            comments:[
                ...this.props.movie.comments,
                {     
                    commentID: commentID,
                    by:this.props.profile.firstName,                   
                    userID: this.props.auth.uid,
                    createdAt: new Date(),
                    comment: e.target.value               
                }               
            ]
        },


        profile:{
            ...this.props.profile,
            comments:[
                ...this.props.profile.comments,
                {                              
                    movieId: this.props.match.params.id,
                    commentID: commentID,                                             
                    createdAt: new Date(),
                    comment: e.target.value               
                }
            ]                           

        }
    })
}

Это код для добавления комментариев в две коллекции Firebase ... Все отлично работает, если у "this.props.movie.comments" есть элементы в массиве ... Проблема начинается, если этот массив пуст.

Как я могу пропустить эту функцию распространения, если этот массив пуст?

Правильно ли я делаю это?

Спасибо

Answer 1

Я выбираю это при необходимости ..

...(this.props.movie.comments || []),

Answer 2

Я думаю, что самый простой способ сделать это - проверка на ноль, поскольку пустой массив все еще можно распространять как в конструкторе, так и здесь. Вы можете сделать это без дублирования кода, задав для локальной константы либо массив, либо пустой массив.

const movieComments = this.props.movies ? this.props.movies : [];
this.setState({
    movie: {
        movie: {
        movieId: this.props.match.params.id,
        ...this.props.movie,           
        comments:[
            ...movieComments,
            {     
                commentID: commentID,
                by:this.props.profile.firstName,                   
                userID: this.props.auth.uid,
                createdAt: new Date(),
                comment: e.target.value               
            }               
        ]
    },
    profile:{
        ...this.props.profile,
        comments:[
            ...this.props.profile.comments,
            {                              
                movieId: this.props.match.params.id,
                commentID: commentID,                                             
                createdAt: new Date(),
                comment: e.target.value               
            }
        ]                           

    }
});

То же самое возможно для this.props.profile.comments, если у вас там такое же поведение. Как правило, я бы удостоверился, что ему всегда передается либо пустой массив, либо заполненный массив, а не передача нуля в качестве пропеллера.