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

EN

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>
    );
};