如何使用過濾器返回一個新數組減去已選擇的一項？

Question

我正在使用Flatlist來呈現項目列表。 在Componentwillmount中，我將狀態設置為獲取的結果。

constructor() {
        super();
        this.state = {
            listOfCameras: [],
        };
    }

componentWillMount() {
        apiService.listCameras().then((res) => {
            this.setState({ listOfCameras: res });
        });
    }

我的平面清單如下所示：

createListOfCams() {
    return (
        <FlatList
            data={this.state.listOfCameras}
            renderItem={({ item, index }) => {
                return (
                    this.createSingleCamera(item, index)
                );
            }}
            keyExtractor={(item, index) => index.toString()}
            // extraData={}
        />
    );
}

最后，我的createSingleCamera如下所示：

createSingleCamera(item, index) {
   const modelCam = item.model;
    return (    
        <View style={styles.singleCamLineView}>
            <View style={styles.modelCamNameView}>
                <Text style={styles.singleCameraText}>{modelCam}</Text>
            </View>
            <View style={styles.deleteIconView}>
                <TouchableOpacity
                    onPress={() => {
                        this.deleteCamFromList(item, index);
                    }}
                >
                    <Text style={styles.singleCameraText}> </Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

我想做的就是將要刪除的項目的索引傳遞給deleteCamFromList方法，然后使用該索引重新呈現Flatlist。

到目前為止，我的deletefromCamList看起來像這樣：

deleteCamFromList(item, index) {
    let allCamerasBeforeDelete = [...this.state.listOfCameras];
    let newArryOfCams = allCamerasBeforeDelete.filter(index);
}

我將如何使用filter返回一個新數組減去我提供的索引？

Answer 1

提供給Array.prototype.filter的第二個參數是項目索引，因此：

deleteCamFromList(item, index) {
    let newArrayOfCams = this.state.listOfCameras.filter((_, i) => i !== index);
    this.setState({listOfCameras: newArrayOfCams})
}