嘗試將函數傳遞給子組件 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

您不能從道具中解構 onDelete，因為您沒有通過道具傳遞 onDelete。 其實你根本就沒有通過。 當您使用 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 上對其進行解構。 但我不太確定刪除吉他后會發生什么，因為該頁面上沒有詳細信息。