为什么不在另一个组件中运行类组件中的函数？ 反应本机

Question

I have a stacknavigator and in headerTitle have a header component for each screen, heres the code:

 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"/>}
        }
    },
});

and this is the component 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;

as you can see I import the component Create_note and create an object of it to use one of its function, in this case save_data , but for some reason it isnt working, dont know if it has something to do with AsyncStorage becase with console.log("hi") it works, but saving data it doesnt, heres the structure of create_note component:

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

heres an image so you can see better the structure:

the function should run when I click in the check icon, in the blue button works because its part of the create_note component, but I want it in the check icon

Answer 1

From looking at your code I think the problem is that you're passing the navigation state object as a parameter to your save_data function in the onClick of your checkmark.

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

but the function definition of save_data doesn't take any parameters:

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

So you could change the save_data function to something like this

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

in order to have it work from inside the Header component.

---

If you want the save button, rendered by the Create_note component, to also call save_data onPress ; you will have to pass the navigation state there as well.