1

就像我的标题说的那样，尽管下面是一个示例，但我对此感到很挣扎

{ id: '1', name: 'one' },
    { id: '2', name: 'two' },
    { id: '3', name: 'three' },
    { id: '4', name: 'four' },

这是我删除 id 为“2”的项目后的平面列表，我希望 id 3 变为 2，id 4 变为 3，因此删除 id 2 后的平面列表会喜欢

{ id: '1', name: 'one' },
        { id: '2', name: 'three' },
        { id: '3', name: 'four' },

这是我的代码

export default function Listdata({ route }) {
    const [itemData, newItem] = React.useState([]);

    const [itemState, setItemState] = React.useState(itemData);
    const [idmoi, incr,] = React.useState(1);
    const [textNhapVao, setTextNhapVao] = React.useState('');


    const tinhToanId = (t) => {
        var idNew = [itemData.id];
        incr(idNew - 1);
    }


    const themItem = () => {
        var arrayMoi = [...itemData, { id: idmoi, name: textNhapVao }];
        incr(idmoi + 1)
        console.log('idddd')
        console.log(idmoi)
        setItemState(arrayMoi);
        newItem(arrayMoi);
    }
    <View>

    </View>

    const keyboardVerticalOffset = Platform.OS === 'ios' ? 40 : 0

    const xoaItem = (IItem) => {
        console.log('routeeee')
        console.log(route.params.paramKey)
        setItemState(prevItemState => prevItemState.filter((_item, _Index) => _Index !== IItem));
    }
    return (
        <Container style={styles.container}>
            <View style={{
                alignItems: 'center',
                justifyContent: 'center',
                borderBottomWidth: 1,
                borderColor: '#d7d7d7',
            }}>
                <Text style={{ fontWeight: 'bold', fontSize: 30, color: 'green' }}>Xin Chào {route.params.paramKey}</Text>
            </View>
            <FlatList
                data={itemState}
                keyExtractor={(item, index) => index}
                renderItem={({ item, index }) => (
                    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                        <View style={{ marginLeft: 20 }}>
                            <Text style={{ fontSize: 30, color: 'red' }} >{item.id}{'\n'}{item.name}</Text>
                        </View>
                        <View style={{ justifyContent: 'center', marginRight: 20 }}>
                            <TouchableOpacity
                                style={{
                                    width: '100%',
                                    backgroundColor: 'red',
                                }}
                                activeOpacity={0.7}
                                onPress={() => xoaItem(index)}
                            >
                                <IconFE name='trash-2' size={30} style={{ color: 'orange' }} />
                            </TouchableOpacity>
                        </View>
                    </View>
                )}
            />
            <View
                style={{
                    position: 'relative', height: 50,
                    borderTopWidth: 1,
                    borderColor: '#d7d7d7',
                }}>
                <KeyboardAvoidingView enabled behavior={Platform.OS === "ios" ? "padding" : null} keyboardVerticalOffset={keyboardVerticalOffset} >
                    <View
                        style={{
                            alignItems: 'center', position: 'relative',
                            flexDirection: 'row',
                            justifyContent: 'space-between',
                            marginLeft: 20,
                            marginRight: 20,
                        }}>
                        <Input
                            onChangeText={data => setTextNhapVao(data)}
                            placeholder='Nhập Vào Đây'></Input>
                        <TouchableOpacity
                            title="Thêm"
                            onPress={themItem}>
                            <IconFE name='check-square' size={30} style={{ color: 'blue' }} />
                        </TouchableOpacity>
                    </View>
                </KeyboardAvoidingView>
            </View>
        </Container>
    )
}

以下是我的截图平面列表： https ://uphinh.org/image/9OLoCN

4

4 回答 4

1

您可以采用一个函数来删除给定索引处的对象。

该函数获取删除的数组，在开始时获取对象并获取id然后它从索引循环直到结束并更新所有id属性。

const
    remove = (array, index) => {
        let removed = array.splice(index, 1);

        if (!removed.length) return array;
        let id = +removed[0].id;
        while (index < array.length) array[index++].id = (id++).toString();
        return array;
    },
    data = [{ id: '1', name: 'one' }, { id: '2', name: 'two' }, { id: '3', name: 'three' },  { id: '4', name: 'four' }];

remove(data, 1);

console.log(data);
.as-console-wrapper { max-height: 100% !important; top: 0; }

于 2021-05-31T07:54:28.443 回答
1

据我了解，您的idis not continue ( 1,2,3...)，因为如果是这样，您根本不需要变异id，您可以只使用array索引。无论如何，如果您认为这id不会继续，我们可以尝试以下算法：

  • 查找删除索引，
  • 将元素映射n到n+1高于删除索引的索引，
  • 删除最后一个元素（这将是我们的最后一个删除项，已被推到最后）。

代码示例：

const data = [
    { id: '1', name: 'one' },
    { id: '2', name: 'two' },
    { id: '5', name: 'five' },
    { id: '6', name: 'six' }]
    
    
const removeFromArr = (arr, name) => {
  const removeIdx = arr.findIndex(e => e.name === name)
  return arr.map((e, i, a) => removeIdx <= i ? ({...e, name: a?.[i + 1]?.name}) : e) // map element n to n+1 if higher than remove idx
            .slice(0, arr.length - 1) // remove last item
}
 
const newData = removeFromArr(data, "two")
 
console.log(newData)
.as-console-wrapper { max-height: 100% !important; top: 0; }

于 2021-05-31T08:04:31.123 回答
1

从提供的数组中，通过查找其索引，通过拼接方法删除选定的数组

工作示例：https ://snack.expo.io/@msbot01/137768

import React, { Component } from 'react';
import {View, Text, StyleSheet, Image, TouchableOpacity, Dimensions, FlatList} from 'react-native';

export default class SupervisorDashboard extends Component<Props> {

 constructor(props) {
    super(props);
    this.state = { 
      userData:[
                {id:1, name:"One"},
                {id:2, name:"Two"},
                {id:3, name:"Three"},
                {id:4, name:"Four"},
                {id:5, name:"Five"},
                {id:6, name:"Six"},
              ]
      
     
    }    
  }

  componentDidMount(){
    
  }


  removeItem(index){
    this.state.userData.splice(index, 1);
    var array = []
    // console.log(JSON.stringify(this.state.userData))
    for(var i=0; i< this.state.userData.length; i++){
      var eachElement = {id: (i+1), name: this.state.userData[i].name }
      array.push(eachElement)
    }
    console.log(JSON.stringify(array)) 

    this.setState({}) 
  }

  renderItem(item, index){
    // console.log(item.id) 
    return(
      <View style={{height:60, width:'90%', marginTop:10, marginLeft:'5%', marginRight:'5%', flexDirection:'row', justifyContent:'space-between', alignItems:'center', borderRadius:10, borderWidth:1, borderColor:'#ececec', padding:10}}>
        <Text>{item.id}</Text>
        <Text>{item.name}</Text>
        <TouchableOpacity onPress={()=>{this.removeItem(index)}} style={{marginRight:10, backgroundColor:'grey', height:'100%', justifyContent:"center", borderRadius:10, padding:10}}>
            <Text>Click to remove</Text>
        </TouchableOpacity>
      </View>
    )
  }
 
  
  render(){
    return(
      <View style={{flex:1, backgroundColor:'white'}}>
                <FlatList
                data={this.state.userData}
                renderItem={({ item, index })=>this.renderItem(item, index)}
                keyExtractor={item => item.id}
              />
        
      </View>
    );
  }

}

const styles = StyleSheet.create({
  background: {
    backgroundColor: 'red'
  }
});
于 2021-05-31T08:05:17.797 回答
0

您可以轻松实现此结果

  • 使用findIndex查找要删除的元素的索引
  • 然后将数组分成两半
  • 将第二个数组解析为int.
  • 加入阵列。
  • 如果元素不在arr.

const arr = [
  { id: "1", name: "one" },
  { id: "2", name: "two" },
  { id: "3", name: "three" },
  { id: "4", name: "four" },
];

function resetIds(arr) {
  return arr.map((o) => {
    return { ...o, id: `${parseInt(o.id) - 1}` };
  });
}

const id = "2";
const elementToRemoveIndex = arr.findIndex((o) => o.id === id);

const result =
  elementToRemoveIndex !== -1
    ? [
        ...arr.slice(0, elementToRemoveIndex),
        ...resetIds(arr.slice(elementToRemoveIndex + 1)),
      ]
    : [...arr];

console.log(result);

于 2021-05-31T07:56:29.100 回答