為什么不在另一個組件中運行類組件中的函數？ 反應本機

Question

我有一個 stacknavigator 並且在headerTitle有每個屏幕的標題組件，代碼如下：

 const Home_stack = createStackNavigator({ //hooks
    
    Home: {
        screen: Home, 
        navigationOptions: ({navigation}) => {
            return {
            headerTitle: () => <Header navigation = {navigation} title = "Shum Note"/>}
        }
    },
    Create: {
        screen: Create, 
        navigationOptions: ({navigation}) => {
            return {
            headerTitle: () => <Childs_header navigation = {navigation} title = "Create Note"/>}
        }
    },
    Edit: {
        screen: Edit, 
        navigationOptions: ({navigation}) => {
            return {
            headerTitle: () => <Childs_header navigation = {navigation} title = "Edit Note"/>}
        }
    },
});

這是 Childs_header 組件：

import Create_note from "../components/Create_note";

class Header extends Component {

    comun = new Create_note();

    render() {
        return (
            <>
                <View style ={{backgroundColor: "white", flexDirection: "row", alignItems: "center"}}>
                    <View>
                        <Text style = {{color: "black", fontSize: 30, marginLeft: -20}}>{this.props.title}
                        </Text>
                    </View>
                    <View>
                        <Text>
                            <Feather name="check-square" size={24} color="black" onPress = {() => this.comun.save_data(this.props.navigation)}/>
                        </Text>
                    </View>
               </View>
            </>
        );
    }
}

export default Header;

如您所見，我導入了組件Create_note並創建了它的一個對象以使用其功能之一，在這種情況下是save_data ，但由於某種原因它不起作用，不知道它是否與AsyncStorage ， AsyncStorage與console.log("hi")它可以工作，但不能保存數據，這是 create_note 組件的結構：

class Create_note extends Component {

state = {
    content: "",
    default_color: "#87cefa", //default color (cyan)
}

save_data = async() => {
    
    if (this.state.content === "") {
    
        //navigation.navigate("Home");
    
    }else {
        
        let clear_content = this.state.content.replace(/ /g,""); //replace al  
        
        try {

            const data = await AsyncStorage.getItem("data");
    
            if (data === null) {
                const data = {"array_notes": [], "last_note": 0}; 
                const last_note = data.last_note + 1;
                const new_note = {note_number: last_note, content: clear_content, color: this.state.default_color, text_color: this.state.color}; //create a new_note object, note_number will be the key for each note
                const array_notes = [];
                array_notes.push(new_note);
                data.array_notes = array_notes;
                data.last_note = last_note;
                await AsyncStorage.setItem("data", JSON.stringify(data)); //using stringify to save the array 
                //navigation.navigate("Home");
            }else {
                const data = JSON.parse(await AsyncStorage.getItem("data")); //use parse to acces to the data of the array
                const last_note = data.last_note + 1;
                const new_note = {note_number: last_note, content: clear_content, color: this.state.default_color, text_color: this.state.color};
                const array_notes = data.array_notes;
                array_notes.push(new_note);
                data.array_notes = array_notes;
                data.last_note = last_note;
                await AsyncStorage.setItem("data", JSON.stringify(data));
                //navigation.navigate("Home");
            } 
    
        }catch(error) {
            alert(error);
        }
    }
}

render() {
    const props = {
        screen: "create_note",
        change_color: this.change_color.bind(this),
        update_color: this.update_color.bind(this),
    }
    return (
        <>
            <ScrollView>                    
                <RichEditor
                ref = {this.richText}
                onChange = {text => this.setState({content: text}, () => console.log(this.state.content))}
                allowFileAccess = {true}>
                </RichEditor>
            </ScrollView>
            {this.state.change_color ? 
                <Color
                    {...props}>
                </Color>
            : null}
            <RichToolbar
                editor = {this.richText}
                onPressAddImage = {this.insertImage}
                actions = {[
                    actions.insertBulletsList,
                    actions.insertOrderedList,
                    actions.insertImage,
                    "change_text_color", 
                ]}
                iconMap  ={{
                    [actions.insertBulletsList]: () => <Text style = {this.styles.icon}><MaterialIcons name = "format-list-bulleted" size = {this.option_icon.size} color = {this.option_icon.color}/></Text>,
                    [actions.insertOrderedList]: () => <Text style = {this.styles.icon}><MaterialIcons name = "format-list-numbered" size = {this.option_icon.size} color = {this.option_icon.color}/></Text>,
                    [actions.insertImage]: () => <Text style = {this.styles.icon}><MaterialIcons name = "image" size = {this.option_icon.size} color = {this.option_icon.color}/></Text>,
                    change_text_color: () => <Text style = {this.styles.icon}><MaterialIcons name = "format-color-text" size = {this.option_icon.size} color = {this.option_icon.color}/></Text>,
                }}
                change_text_color = {this.change_color}
                style = {{backgroundColor: "white"}}>
            </RichToolbar>
            <Button title = "save" onPress = {this.save_data}></Button>
        </>
    );
}

這是一張圖片，以便您可以更好地看到結構：

當我單擊check圖標時，該功能應該運行，藍色按鈕起作用，因為它是 create_note 組件的一部分，但我希望它在check圖標中

Answer 1

通過查看您的代碼，我認為問題在於您將導航狀態對象作為參數傳遞給您的save_data標記onClick的save_data函數。

this.comun.save_data(this.props.navigation)

但是save_data的函數定義不帶任何參數：

save_data = async () => {
  // ...
};

所以你可以將save_data函數更改為這樣的

save_data = async (navigation) => {
  // ...
};

為了讓它從Header組件內部工作。

---

如果您希望Create_note組件呈現的保存按鈕也調用save_data onPress ； 您還必須在那里傳遞導航狀態。