Question

本机，我试图滑动以删除Rdvdetail（第二个代码）但是当我删除它时，它并没有从scrollView中消失，我必须重新打开页面以使其消失，但是背面效果很好，我不知道如何消失
有什么办法可以使它立即从scrollView中消失吗？通过自动重新加载滚动视图或文件管理器有什么帮助吗？

import React, { Component } from "react";
import { ScrollView } from "react-native";
import axios from "axios";
import RdvDetail from "./RdvDetail";
import { CardSection } from "./utilities/CardSection";
import { Spinner } from "./utilities/Spinner";
import Swipeout from "react-native-swipeout";
class Event extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Rdvs: [],
      rowIndex: null,
      refreshing: false
    };
  }

  componentWillMount() {
    this.fetchdata();
  }
  getInitialState = () => {
    return {
      scrollEnabled: true
    };
  };
  _allowScroll = scrollEnabled => {
    this.setState({ scrollEnabled: scrollEnabled });
  };
  fetchdata = () => {
    axios
      .get("http://localhost:3000/api/5cc92f1b8929820fecdecda3/mesRdv")
      .then(response => this.setState({ Rdvs: response.data }));
  };

  deleteRdv = id_rdv => {
    axios
      .delete("http://localhost:3000/api/rdv/" + id_rdv)
      .then(response => {
        if (response.status === 200) {
          console.log(response.data);
        }
      })
      .catch(error => {
        console.log(error.response.data.message);
        if (error.response.status === 400) {
        }
      });
  };

  renderRDV() {
    if (this.state.Rdvs.length < 1) {
      console.log("here");

      return (
        <CardSection>
          <Spinner size="large" />
        </CardSection>
      );
    } else {
      return this.state.Rdvs.map(Rdv => (
        <Swipeout
          right={[
            {
              text: "Delete",
              backgroundColor: "red",
              color: "white",
              onPress: () => this.deleteRdv(Rdv._id),
              autoClose: true
            }
          ]}
          rowIndex={Rdv._id}
          sectionId={0}
          autoClose={true}
          key={Rdv._id}
          scroll={event => this._allowScroll(event)}
        >
          <RdvDetail key={Rdv._id} Rdv={Rdv} />
        </Swipeout>
      ));
    }
  }

  render() {
    return (
      <ScrollView scrollEnabled={this.state.scrollEnabled}>
        {this.renderRDV()}
      </ScrollView>
    );
  }
}
export default Event;

import React, { Component } from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";

const AlbumDetail = props => {
  state = {
    rowIndex: null,
    monthNames: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec"
    ]
  };

  return (
    <View style={styles.container}>
      <View style={styles.eventBox}>
        <View style={styles.eventDate}>
          <Text style={styles.eventDay}>{props.Rdv.day + " "}</Text>
          <Text style={styles.eventMonth}>
            {this.state.monthNames[props.Rdv.month - 1]}
          </Text>
        </View>
        <View style={styles.eventContent}>
          <Text style={styles.eventTime}>{props.Rdv.time}</Text>
          <Text style={styles.userName}>{props.Rdv.doctor}</Text>

          <Text style={styles.description}>Rdv note</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#DCDCDC"
  },
  eventList: {
    marginTop: 20
  },
  eventBox: {
    padding: 10,
    marginTop: 5,
    marginBottom: 5,
    flexDirection: "row"
  },
  eventDate: {
    flexDirection: "column"
  },
  eventDay: {
    fontSize: 30,
    color: "#0099FF",
    fontWeight: "600"
  },
  eventMonth: {
    fontSize: 16,
    color: "#0099FF",
    fontWeight: "600"
  },
  eventContent: {
    flex: 1,
    flexDirection: "column",
    alignItems: "flex-start",
    marginLeft: 10,
    backgroundColor: "#FFFFFF",
    padding: 10,
    borderRadius: 10
  },
  description: {
    fontSize: 15,
    color: "#646464"
  },
  eventTime: {
    fontSize: 18,
    color: "#151515"
  },
  userName: {
    fontSize: 16,
    color: "#151515"
  },
  test: {
    borderRadius: 20
  }
});

export default AlbumDetail;

Answer 1

您可以在每次删除后以您的状态更新Rdvs列表，这将导致列表重新呈现。像这样：

deleteRdv = id_rdv => {
    axios
        .delete("http://localhost:3000/api/rdv/" + id_rdv)
        .then(response => {
            if (response.status === 200) {
                console.log(response.data);
            }
            this.fetchdata(); // Add this line to fetch new list
        })
        .catch(error => {
            console.log(error.response.data.message);
            if (error.response.status === 400) {
            }
        });
};

滑出删除后，有什么方法可以更新ScrollView？

1 个答案: