React-Native 对象作为 React 子对象无效

Question

我有一个涉及购物清单的待办事项列表界面，它允许用户输入一个项目，每个项目都使用由 Array.map() 映射的 ScrollView 显示我给每个项目一个唯一的每个值的键但是我不断得到错误“对象作为 React 子项无效”。 我正在尝试将每个ingri添加到ingriList并给它一个唯一的id

编码：

const [ingriList, setIngriList] = useState([])
const [ingri, setIngri] = useState('')

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

const handleSubmit = (ingriId , ingri) => {
    const newIngriList = ingriList.concat({ id: ingriId, val: ingri })
    return (
        setIngri(''),
        props.Item.length === 0
            ? <Text/>
            : setIngriList(newIngriList)
    )
}

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(Date.now(), ingri)}>
                    <Text style={styles.addButton}>Add</Text>
                </TouchableOpacity>
            </View>
        <ScrollView>
            {ingriList.map(i =>
                (
                    <View>
                        <Text style={styles.ingridientValues}>{i}</Text>
                        <View style={styles.cancel}>
                            <TouchableOpacity onPress={() => deleteItem(ingriList.id)}>
                                <MaterialIcons name="cancel" size={30} color={Colors.orange} />
                            </TouchableOpacity>
                        </View>
                    </View>
                )
            )
            }
        </ScrollView>
    </View >
)

如果有人可以帮助我弄清楚为什么会出现此错误以及将每个ingri添加到ingriList的适当方法是什么，我将非常感激，这样我就可以拥有一个唯一的key使用deleteItem function 删除所选项目。 先感谢您！！！！！

Answer 1

您正在尝试在 Text 组件中显示 object，

尝试显示您设置的值，然后它会起作用。

<Text style={styles.ingridientValues}>{i.val}</Text>