從數組中刪除特定項目，無法按預期工作

Question

有人可以告訴我從數組中刪除項目有什么問題嗎？ 在帶有axios.delete方法的deleteSingleItemHandler中，它的工作原理應與它一樣，並且在Firebase上會完全刪除所選的項目，但是當我想從狀態數組中刪除該項目時，它將刪除一個項目，但不會刪除確切選擇的項目，例如，我單擊了第三個項目，在Firebase上，它刪除了第三項，並在設備屏幕上刪除了第二項...我在做什么錯？

提前致謝！ 干杯

class HistoryScreen extends Component {
  state = {
    orders: []
  };

  componentDidMount() {
    axios
      .get(".../orders.json")
      .then(response => {
        const fetchedOrders = [];

        for (let key in response.data) {
          fetchedOrders.push({
            ...response.data[key],
            id: key
          });
        }

        this.setState({ orders: fetchedOrders });

      });
  }

  deleteSingleItemHandler = id => {
    axios
      .delete(`...orders/${id}.json`)
      .then(response => {
        console.log(response);
      });

    const newArray = [...this.state.orders];
    newArray.splice(id, 1);

    this.setState({ orders: newArray });
  };

  render() {
    return (
      <View style={styles.container}>
        <ScrollView>
          <View style={styles.completeOrder}>

              {this.state.orders.map(order => {
              return (
                <TouchableOpacity
                  key={order.id}
                  onPress={() => this.deleteSingleItemHandler(order.id)}
                >
                  <View style={styles.singleItem}>
                    <View style={styles.orderItem}>
                      <View style={{ flex: 1, marginLeft: 5 }}>
                        <Text style={{ fontFamily: Fonts.GloriaHallelujah }}>
                          {order.articleName}
                        </Text>
                      </View>

                      <View
                        style={{
                          flex: 1,
                          justifyContent: "flex-end",
                          flexDirection: "row",
                          marginRight: 5
                        }}
                      >
                        <Text>{order.articlePrice}</Text>
                      </View>
                    </View>
                  </View>
                </TouchableOpacity>
              );
            })}
          </View>
        </ScrollView>
      </View>
    );
  }
}

Answer 1

函數Array.prototype.splice的第一個參數是索引。

使用函數Array.prototype.findIndex

newArray.splice(newArray.findIndex(o => o.id === id), 1);

或者，您可以使用Array.prototype.filter函數過濾該對象

newArray = newArray.filter(o => o.id !== id);