Установка состояния с предварительно существующими значениями

Question

В моей текущей реализации я получаю mov ie из моей базы данных, в этом mov ie уже есть жанры, поэтому я добавляю эти жанры к значению моего выбора. Это мое состояние, когда компонент смонтирован.

Затем пользователь может удалить жанры или добавить другие жанры к этому mov ie. Когда я удаляю жанр, мое состояние возвращает ноль, но когда я добавляю жанры в mov ie, я получаю эту ошибку: Предупреждение: каждый дочерний элемент в списке должен иметь уникальный «ключ» prop.

И если я попытаюсь добавить больше жанров, мое состояние вернется неопределенным:

class Movie extends Component {
    genereStateMovie = props => ({
        genre: props.movie ? props.movie.genre : [],
    });

    constructor(props) {
        super();
        this.state = {
            ...this.genereStateMovie(props),
            warning: null,
            errors: {},
        };
    }

    componentDidMount() {
        const { getMovie, getGenres } = this.props;
        const { id } = this.props.match.params;
        getMovie(id);
        getGenres(id);
    }

    componentDidUpdate(prevProps) {
        if (
            (!prevProps.movie && this.props.movie) ||
            (prevProps.movie && this.props.movie && prevProps.movie.updatedAt !== this.props.movie.updatedAt)
        )
            this.setState(this.genereStateMovie(this.props));
    }

    addGenreToState = genre => {
        this.setState({ genre });
    };

    renderContent() {
        const { genre} = this.state;
        let { genres } = this.props;

        return (
            <Container>
                <InfoTable
                    name="Genre"
                    value={
                        <DropDown>
                            <Select
                                placeholder="Select Genre"
                                errors={errors.genre}
                                options={(genres ? genres : []).map(item => ({
                                    value: item._id,
                                    label: item.name,
                                }))}
                                onChange={this.addGenreToState}
                                value={(genre || []).map(item => ({
                                    value: item._id,
                                    label: item.name,
                                }))}
                                isMulti
                            />
                        </DropDown>
                    }
                />

            </Container>
        );
    }
    render() {
        console.log(this.state.genre);
        return (
            {this.renderContent()}
        );
    }
}

const mapStateToProps = state => ({
    movie: state.movie.movie,
    genres: state.genre.genres,
});

export default connect(mapStateToProps, { ...actionsMovies, ...actionsGenre })(Movie);