Не обновляется state в data-picker

Я использую react-day-picker (multiple select)

Календарь получает даты с сервера, отправляет при нажатии на дату и удаляет при снятии выделения с даты.

Сейчас есть проблема со стейтом после удаления даты.

Примерный сценарий.

  1. При открытой странице (получены несколько дат с сервера и они видны выделенными на календаре), если снять с них выделение, запрос на удаление уходит и визуально синий кружок снимаетсяenter image description here

2. Если я выделю новые даты, а потом сразу с этих же дат сниму выделение, то они визуально остаются выделенными (синий кружок остается). Не знаю как победить это.

Code

class Issues extends React.Component {
    constructor(props) {
        super(props);


        this.state = {
            adsIssue: [],
            fullIssue: [],
        };

        this.handleDayClick = this.handleDayClick.bind(this);

    }

    componentDidMount() {
        axios.get(`myUrl=${this.props.match.params.id}`)
            .then(res => {
                return res;
            })
            .then(
                (result) => {
                    this.setState({
                        adsIssue: result.data.map((issue) => (new Date(issue.stamp))),
                        fullIssue: result.data,
                    });
                }
            )
            .catch(err => {
                return err
            })
    }

    handleDayClick(day, { selected }) {
        const { adsIssue } = this.state;

        const data = {
            scroll_id: this.props.match.params.id,
            stamp: moment(day).format('YYYY-MM-DD'),
        };

        if (selected) {
            const selectedIndex = adsIssue.findIndex(selectedDay =>
                DateUtils.isSameDay(selectedDay, day)
            );
            adsIssue.splice(selectedIndex, 1);

            const removeId = this.state.fullIssue.find(x => moment(x.stamp).format('YYYY-MM-DD') === data.stamp);
            ;
            if (!removeId)
            {
                return;
            }


            axios
                .delete(`myUrl`, {params: {id: removeId.id}})
                .then(res => console.log(res))
                .catch(err => console.log(err));
            console.log('deselect')

        } else {
            adsIssue.push(day);
            axios
                .post(`myUrl`, data)
                .then(res => console.log(res))
                .catch(err => console.log(err));
            console.log('select');

        }
        this.setState({ adsIssue });

    }


    render() {

        return (
            <React.Fragment>
                <DayPicker
                    selectedDays={this.state.adsIssue}
                    onDayClick={this.handleDayClick}
                />

            </React.Fragment>
        )

    }
}

Буду благодарен за любую помощь


Ответы (0 шт):