尝试将函数传递给子组件 React Native - 不断收到“...不是函数”和“...未定义”错误

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，因为你没有通过 props 传递 onDelete。其实你根本没有通过。当您使用参数传递其他详细信息时，您也可以使用它传递 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 上对其进行解构。但我不太确定删除吉他后会发生什么，因为您不会在该页面上看到详细信息。