React-Native 整个列表删除而不是选中项

Question

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

编码：

    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”保留一个唯一标识符，方法是将其ingriList对象列表：

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 function，然后将其从数组中删除。