Question

我正在使用Flatlist来呈现项目列表。在Componentwillmount中，我将状态设置为fetch的结果。

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

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

我的Flatlist看起来像这样：

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})
}

如何使用过滤器返回一个新数组减去已选择的一个项目？

1 个答案: