Question

我有一个待办事项清单界面，涉及一个购物清单，该清单允许用户输入商品，并且使用Array.map（）映射的ScrollView显示每个商品，但是当我选择要删除的单个商品时，整个列表删除。我似乎找不到问题，因为每个关键道具都是独一无二的。

代码：

    let j = 1
    const [ingriList, setIngriList] = useState([])
    const [ingri, setIngri] = useState('')
    
    const deleteItem = (key) => {
        const filteredItems = ingriList.filter(item => item.key !== key)
        setIngriList(filteredItems)
    }
    
    const handleSubmit = () => {
        return (
            setIngri(''),
            ingri.length === 0
                ? <Text/>
                : setIngriList(ingriList.concat(ingri))
        )
    }
    
    return(
        <View style = { styles.ingriContainer }>
            <View style={styles.addPhotoCont}>
                <TextInput
                    style={styles.textInput}
                    placeholder={'Add Something'}
                    onChangeText={item => setIngri(item)}
                    value={ingri}
                />
            </View>
                <View>
                    <TouchableOpacity onPress={handleSubmit}>
                        <Text style={styles.addButton}>Add</Text>
                    </TouchableOpacity>
                </View>
            <ScrollView>
                {ingriList.map(i =>
                    (
                        <View key={j++}>
                            <Text style={styles.ingridientValues}>{i}</Text>
                            <View style={styles.cancel}>
                                <TouchableOpacity onPress={() => deleteItem(ingriList.key)}>
                                    <MaterialIcons name="cancel" size={30} color={Colors.orange} />
                                </TouchableOpacity>
                            </View>
                        </View>
                    )
                )
                }
            </ScrollView>
        </View >
    )

如果有人可以帮助我弄清楚为什么要删除整个列表而不是选定项目的原因，我将衷心感谢。预先谢谢！！！！

Answer 1

在您的代码中，ingriList是字符串列表，因为您按以下方式调用setIngriList：

setIngriList(ingriList.concat(ingri))

现在，当您尝试从此列表中删除某项时，将调用deleteItem(ingriList.key)，但是ingriList.key是undefined。最后，在deleteItem中，您将筛选出与key属性匹配的条目，但是由于每个元素的key属性均为undefined，因此所有条目都匹配，并且ingriList设置为空数组。这很可能是您观察到所有元素都被删除的原因。

通过将ingriList中的每个'ingri'保留为一个对象列表，尝试为其保留唯一的标识符：

const handleSubmit = (ingriId, ingri) => {
  const newIngriList = ingriList.concat({ id: ingriId, val: ingri })
  setIngriList(newIngriList)
}

const deleteItem = (ingriId) => {
  setIngriList(ingriList.filter(ingri => ingri.id !== ingriId))
}

ingriList中的每个条目都必须具有唯一的id属性，您可以将其传递给deleteItem函数，然后将其从数组中删除。

React-Native整个列表删除，而不是所选项目

1 个答案: