反应本机FlatList删除项目

Question

我想从FlatList中删除项目。但是，here的解决方案不适用于我的代码。运行代码时，出现诸如“ 索引未定义”之类的错误。

我尚未找到有关此问题的其他帖子，因此我们将不胜感激。

下面提供的代码段：

   export default class FrCreateScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            //new timeSlots
            timeSlots: [],
        }
    }

    setEndTime = (event, appointmentEndTime, textEndTime) => {
        appointmentEndTime = appointmentEndTime || this.state.appointmentEndTime;
        textEndTime = textEndTime || moment(appointmentEndTime).format('h:mm a').toString();
        this.setState({
            showEndTime: Platform.OS === 'ios' ? true : false,
            appointmentEndTime,
            textEndTime,

            timeSlots: [
                ...this.state.timeSlots,
                {
                    apptdate: this.state.textAppointmentDate,
                    appttime: this.state.textAppointmentTime,
                    endTime: textEndTime,
                }
            ],
        });
    }

    deleteDateTime = (id) => {
        const filteredData = this.state.timeSlots.filter(item => item.id !== id);
        this.setState({ timeSlots: filteredData });
    }

    render() {
        return (
            <ScrollView>
                ...
                <View>
                    <FlatList
                        data={this.state.timeSlots}
                        keyExtractor={({ id }, index) => index.toString()}
                        renderItem={({ item }) => {
                            return (
                                <View style={styles.containerList}>
                                    ...
                                        <TouchableOpacity onPress={() => this.deleteDateTime(index)}>
                                            <Feather name="trash" style={styles.icon} />
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            );
                        }}
                    />
                </View>
            </ScrollView>
        )
    };
};

以下屏幕截图：

Answer 1

我认为您需要在renderItem { item, index }内添加索引

renderItem = {({ item, index }) => {
    return (
        <View style={styles.containerList}>
            <TouchableOpacity onPress={() => this.deleteDateTime(index)}>
                <Feather name="trash" style={styles.icon} />
            </TouchableOpacity>
        </View>
    );
}}

Answer 2

在map函数中进行渲染时，它也提供了索引，因此请尝试添加该索引。

/**
 * Remove cancel button ( When last payment was less then 3 months ago )
 *
 * @param array $actions, action array.
 * @param int $subscription_id, the id of the current subscription.
 * @return array $actions, the altered action array.
 */
function remove_cancel_button( $actions, $subscription_id ) {

  // Gets the subscription object on subscription id
  $subscription = new WC_Subscription( $subscription_id );

  // Get last payment date from subscription object, uses the sites timezone setting
  $last_payment_date = $subscription->get_date( 'last_payment', 'site' );
  $last_payment_date = new DateTime( $last_payment_date );

  // The current date/time, uses the sites timezone setting
  $today = new DateTime( current_time('mysql') );

  // Get the difference in date
  $interval = $today->diff( $last_payment_date );

  // Check if interval is less then 3 months
  if( $interval->m < 3 ){
    unset( $actions['cancel'] );
  }

  // Return the actions
  return $actions;
}
add_filter( 'wcs_view_subscription_actions', 'remove_cancel_button', 100, 2);

希望有帮助

Answer 3

确定。在touchable onPress上，参数应为'item.index'而不是'index'。

这是正确的代码：

renderItem={({ item,index }) => {
                            return (
                                <View style={styles.containerList}>
                                    ...
                                        <TouchableOpacity onPress={() => this.deleteDateTime(item.index)}>
                                            <Feather name="trash" style={styles.icon} />
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            );
                        }}