React Native如何删除State数据更新FlatList及向删除函数传ticketID

调整步骤如下： #

1. 将删除逻辑和状态更新逻辑整合到MyEventsScreen类中
   原来的独立deleteItem函数无法操作页面的state，我们直接在MyEventsScreen类内定义删除方法，同步处理接口请求和state更新：

export default class MyEventsScreen extends Component {
  state = {
    tickets: [],
  };

  // 新增删除处理方法
  deleteItem = (ticketID) => {
    fetch("http://127.0.0.1:8000/api/ticket/" + ticketID, {
      method: "DELETE",
    })
    .then(() => {
      // 过滤掉对应ticketID的票务数据，返回新数组更新state
      this.setState(prevState => ({
        tickets: prevState.tickets.filter(item => item.ticketID !== ticketID)
      }))
    })
    .catch((error) => {
      console.error(error);
    });
  }

  componentDidMount = () => {
    // 原有拉取数据逻辑不变
    fetch("http://127.0.0.1:8000/api/fullticket/?userID=4", {
      method: "GET",
    })
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          tickets: responseJson,
        });
      })
      .catch((error) => {
        console.error(error);
      });
  };

  render() {
    return (
      <View>
            <FlatList
              style={{ flex: 1 }}
              data={this.state.tickets}
              {/* 给Item组件传递deleteItem方法作为props */}
              renderItem={({ item }) => <Item item={item} deleteItem={this.deleteItem} />}
              keyExtractor={(item) => item.ticketID}
            />          
      </View>
    );
  }
}

2. 修改Item组件，接收props并传递ticketID给删除方法

// 新增接收deleteItem参数
function Item({ item, deleteItem }) {
  return (
    <View style={styles.listItem}>
      <Image
        source={{ uri: item.eventID.eventImage1 }}
      />
      <View>
        <Text>{item.eventID.artistName}</Text>
        <Text>{item.eventID.eventName}</Text>
        <Text>{item.ticketID}</Text>
      </View>
      <TouchableOpacity
        {/* 点击时将当前条目的ticketID传入删除方法 */}
        onPress={() => deleteItem(item.ticketID)}
      >
        <Text>x</Text>
      </TouchableOpacity>
    </View>
  );
}

原理解释 #

• 上述修改可同时解决你提出的两个问题：点击删除按钮时会把当前条目的ticketID传递给deleteItem方法，接口请求成功后通过filter返回不含被删除条目的新数组，调用setState更新state的tickets值。
• FlatList的data属性绑定了state的tickets，state更新后FlatList会自动重新渲染，无需额外手动刷新列表。

内容的提问来源于stack exchange，提问作者user16372363