javascript - 在 React Native 中从数组 onPress 中删除对象

Question

我的范围是通过按日历上的每个日期从用户那里获取最多五个日期。例如，用户可以点击日历上的 5 个日期，如果用户在所选日期上按下，则应删除该选择，以便用户可以再次点击一个日期。

我正在使用 react-native-calendars 来显示日历，并通过将日期保存在状态中来实现日期选择过程。但是，无法弄清楚如果用户在所选日期上按下，如何从状态中删除所选日期。

这是我的代码:

class PausePlan extends Component {

onPressSelectionHandler(day) { 
    this.setState((prevState) => ({selectedDateByOnPress: [...prevState.selectedDateByOnPress, day ], daysing: day}));     
}

state={selectedDateByOnPress: [], selected: false, daysing: ""}
render () {
    const selectedDate = _.uniqBy(this.state.selectedDateByOnPress, function(e){
        return e;
    });
    const date = format(new Date(), 'YYYY-MM-DD');
    const addingDate = format(addDays(new Date(date), 30), 'YYYY-MM-DD');
    return (
        <Container>
            <View style={{ paddingTop: 10, paddingLeft: 60 }}>
                <H1>Plan Status</H1>
            </View>


        <View style={{ paddingTop: 20 }}>
            <Calendar 
            minDate={date}
            maxDate={addingDate}
            onDayPress={(day) => {
                this.onPressSelectionHandler(day)
            }}
            markedDates={selectedDate.reduce((acc, {dateString}) => {
                acc[dateString] = { selected: dateString === this.state.daysing ? true : false, color: '#22a6b3'};
                return acc;
                },
              {}
            )}
            markingType={'period'}
            />
        </View>
        </Container>
    );
}
};

通过使用上面的代码，如果用户按下一个日期，它就会被选中，我正在使用 onpress 处理程序将其设置为我的状态。但是，如果用户在同一个所选日期上按下，则所选日期应该被取消选择，并且它应该在状态中更新(因为如果状态发生变化，日历会重新呈现)。

我该怎么做？请指导我!

Answer 1

您可以检查 selectedDateByOnPress 是否已经包含 day。如果是，过滤它。否则，将其添加到数组中:

this.setState((prevState) => ({
      selectedDateByOnPress: 
          [...(prevState.selectedDateByOnPress.some(d => d.dateString === day.dateString) 
                 ? prevState.selectedDateByOnPress.filter(d => d.dateString !== day.dateString) 
                 : [...prevState.selectedDateByOnPress, day])
          ],
      daysing: day
    }))