按下删除按钮后，从其他组件中删除平面列表项目渲染

Question

我是一个全新的反应者，我正在尝试删除来自其他组件的清单项目。当我按下删除按钮时，该项目应被删除。

... 这是我正在渲染平面列表的文件。 ...

import React from "react";
import {
  ActivityIndicator,
  AsyncStorage,
  FlatList,
  Text,
  View,
  Linking,
  ScrollView,
  Image
} from "react-native";
import ButtonCom from "../../../components/ButtonCom";
import ClinicCard from "../../../components/ClinicCardCom";
import { Button } from "native-base";
import color from "../../../ui/color";
import { getMyClinic } from "../../../actions/getClinicActions";
import { connect } from "react-redux";
import AddClinic from '../.././DoctorFlow/AddClinic/AddClinic';
class ViewClinic extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: null,
      doctorId: null,
      data: [1, 2, 3, 4, 5]
    };
  }

  componentDidMount() {
    this.getUser();
  }

  async getUser() {
    await AsyncStorage.getItem("user").then(user =>
      this.setState({ user: JSON.parse(user) })
    );
    console.log("doctorData", this.state.user);
    this.setState({
      doctorId: this.state.user.user._id
    });
    this.props.getClinics(this.state.doctorId);
  }
  _renderItem = ({ item }) => {
    return (
      <View style={{ flex: 1 }}>

... 我创建并渲染细节的组件 ...

     <ClinicCard
          clinicName={item.clinicName}
          clinicAddress={item.address}
          clinicNumber={item.mobile}
          days={item.availability.days.join(' ' + ',' + ' ')} 
          time={item.availability.time.from + " " + "-" + " " + item.availability.time.to}
        />
      </View>
    );
  };

  render() {
    if (this.props.loading) {
      return (
        <View
          style={{ flex: 1, alignSelf: "center", justifyContent: "center" }}
        >
          <ActivityIndicator size="large" />
          <Text>Fetching your clinics</Text>
        </View>
      );
    }
    return (
      <View style={{ flex: 1, padding: 10 }}>
        <FlatList
          data={this.props.myClinicList}
          renderItem={this._renderItem}
        />
        <View style={{ flex: 1, alignSelf: "center" }}>
          <Button
            full
            rounded
            style={{
              position: "absolute",
              bottom: 25,
              left: 110,
              marginBottom: 10,
              backgroundColor: color.primary,
              alignSelf: "center",
              shadowColor: 'black',
              shadowOpacity: 0.8,
              elevation: 15,
              shadowRadius: 18,
              shadowOffset : { width: 56, height: 13}
            }}
            onPress={() => this.props.navigation.navigate("AddClinic")}
          >
            <Text style={{ color: "#fff", paddingHorizontal: 14, paddingBottom: 4, fontSize: 31 }}>
              +
            </Text>
          </Button>
        </View>
      </View>
    );
  }
}

const mapStateToProps = ({ myClinicReducer }) => {
  const { myClinicList, loading, errorMsg } = myClinicReducer;
  console.log("myclickiclistinside", myClinicList);
  return {
    myClinicList,
    loading,
    errorMsg
  };
};

const mapDispatchToProps = dispatch => ({
  getClinics: doctorId => dispatch(getMyClinic(doctorId))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ViewClinic);

... 一个自定义组件，在其中呈现了删除按钮和自定义样式 ...

import React from "react";
import { Image, 
         StyleSheet, 
         Text, 
         View, 
         Touchable, 
         TouchableHighlight, 
         TouchableOpacity } from "react-native";
import { Button } from "native-base";
import color from "../ui/color";
import { editProfileStyle } from '.././containers/DoctorFlow/EditProfile/EditProfileStyles';
export default class ClinicCard extends React.Component {
  render() {
    return (
      <View
        style={{
          borderRadius: 2.7,
          backgroundColor: "#ffffff",
          borderLeftColor: "#2abb91",
          borderLeftWidth: 2,
          borderRightColor: "#2abb91",
          borderRightWidth: 2,
          marginBottom: 8,
          shadowColor: 'black',
          shadowOpacity: 0.6,
          elevation: 4,
          shadowRadius: 20,
          shadowOffset : { width: 50, height: 10}
        }}
      >
        <View style={{ padding: 15 }}>
          <View style={{ flexDirection: "row", marginBottom: 15 }}>
            <Image
              style={{
                width: 25,
                height: 25
              }}
              source={require("../Images/DoctorFlow/location.png")}
            />
            <View
              style={{
                flexDirection: "column",
                marginLeft: 12
              }}
            >
              <Text
                style={{
                  marginBottom: 3,
                  fontSize: 15,
                  fontWeight: "bold",
                  color: "#333333"
                }}
              >
                {this.props.clinicName}
              </Text>
              <Text
                style={{
                  fontSize: 13,
                  color: "#666666"
                }}
              >
                {this.props.clinicAddress}
              </Text>
            </View>
          </View>
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              marginBottom: 12
            }}
          >
            <Image
              style={{
                width: 25,
                height: 25
              }}
              source={require("../Images/DoctorFlow/smartphone.png")}
            />

            <Text
              style={{
                marginLeft: 12,
                fontSize: 15,
                fontWeight: "bold",
                color: "#333333"
              }}
            >
              {this.props.clinicNumber}
            </Text>
          </View>
          <View style={{ flexDirection: "row" }}>
            <Image
              style={{
                width: 25,
                height: 25
              }}
              source={require("../Images/DoctorFlow/time.png")}
            />
            <View
              style={{
                flexDirection: "row",
                marginLeft: 12,
                alignItems: "center"
              }}
            >
              <Text
                style={{
                  fontSize: 15,
                  fontWeight: "bold",
                  color: "#2abb91"
                }}
              >
                {this.props.time}
              </Text>
              <Text
                style={{
                  fontSize: 13,
                  fontWeight: "bold",
                  color: "rgba(102, 102, 102, 0.92)",
                  marginLeft: 5
                }}
              >
                {this.props.days}
              </Text>
            </View>
          </View>
          <View style={{
                  flexDirection: "row",
                  marginBottom: 10
                }}>
            <TouchableHighlight underlayColor="transparent">
              <View style={editProfileStyle.clinicBtn}>
                  <Text style={editProfileStyle.proffesionBtnViewText}>
                    Edit
                  </Text>
              </View>
            </TouchableHighlight>
            <TouchableHighlight 
            underlayColor="transparent"
            onPress={() =>
              this.setState({
                clinicObj: []
              })
            }>
              <View style={editProfileStyle.clinicBtn}>
                  <Text style={editProfileStyle.proffesionBtnViewText}>
                    Delete
                  </Text>
              </View>
            </TouchableHighlight>
            </View>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  txt: {
    fontFamily: "Gotham-Medium",
    color: "#fff",
    fontSize: 16
  }
});