尝试将函数传递给子组件 React Native - 不断收到'...not a function'和'...undefined'错误

Question

尝试在React Native中管理父/子组件之间的状态。使用功能组件和挂钩。我希望我的Collection组件(父级(能够在从子级调用onDelete函数后更新数组的状态。我一直在调整这个功能，但似乎无法让它发挥作用。提前感谢！

父级：

const Collection = () => {
const navigation = useNavigation();
const [showAddGuitar, setShowAddGuitar] = useState(false);
const [gtrlist, setGtrlist] = useState(GUITARS);
const [selectedGuitar, setSelectedGuitar] = useState({});
// Open Details Page
const openDetails = (guitar) => {
setSelectedGuitar(guitar);
navigation.navigate("Details", {
id: guitar.id,
year: guitar.year,
brand: guitar.brand,
model: guitar.model,
sn: guitar.sn,
description: guitar.description,
history: guitar.history,
});
};
// Delete Guitar
const deleteGuitar = (id) => {
setGtrlist(gtrlist.filter((guitar) => guitar.id !== id));
console.log(gtrlist);
};
return (
<View>
{showAddGuitar && (
<GuitarModal onAdd={addGuitar} onCloseModal={onCloseModal} />
)}
{gtrlist.length <= 0 && <Text>Collection empty</Text>}
{gtrlist.length > 0 && (
<FlatList
onDelete={deleteGuitar}
data={gtrlist}
keyExtractor={(item) => item.id.toString()}
renderItem={({ item }) => (
<Text
style={styles.item}
onPress={() => openDetails(item)}
>
{item.year} {item.brand} {item.model}
</Text>
)}
/>
)}
<Button
title="Add New Guitar"
style={[styles.footer, styles.button, styles.buttonOpen]}
onPress={handleAddNewGuitarPress}
/>
</View>

儿童：

const DetailsPage = ({ route, navigation, onDelete }) => {
const { id, year, brand, model, sn, description, history } = route.params;
return (
<View>
<Text>
{year} {brand} {model}
</Text>
<Text>S/N: {sn}</Text>
<Text>Description: {description}</Text>
{history &&
history.map((item) => (
<Text key={item.id}>
{item.date} {item.item} {item.cost}
</Text>
))}
<View>
<Button title="Go back" onPress={() => navigation.goBack()} />
<Button
title="Delete guitar"
onPress={() => onDelete(id)}
/>
</View>
</View>
);
};

Answer 1

您不能从props中销毁onDelete，因为您没有将onDelete与props一起传递。事实上你根本没通过。当你用params传递其他细节时，你也可以用它传递onDelete函数。

const openDetails = (guitar) => {
setSelectedGuitar(guitar);
navigation.navigate("Details", {
id: guitar.id,
year: guitar.year,
brand: guitar.brand,
model: guitar.model,
sn: guitar.sn,
description: guitar.description,
history: guitar.history,
deleteGuitar,
});
};

那么你当然需要在DetailsPage上销毁它。但我不太确定你删除吉他后会发生什么，因为你在那个页面上没有详细信息。