从数组中删除特定项目，未按预期工作

Posted 2023-02-22

【中文标题】从数组中删除特定项目，未按预期工作

【英文标题】：Deleting specific item from array, not working as intended

【发布时间】：2019-03-30 12:27:48

【问题描述】：

谁能告诉我从数组中删除一个项目有什么问题？在使用 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>
    );
  

【参考方案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);