Navigation.getParam is undefined while trying to pass function as parameter

问题

I'm trying to use a function from my Main component in my details component which I user react navigation to navigate to and I want to save some changes in detail screen in my main component

//Main.js

import React from 'react';
import {
    StyleSheet ,
     Text,
     View, 
     TextInput,
     ScrollView,
     TouchableOpacity,
     KeyboardAvoidingView,
     AsyncStorage
    } from 'react-native'
import Note from './Note'
import { createStackNavigator, createAppContainer } from "react-navigation";
import Details from './Details';


export default class Main extends React.Component {

  static navigationOptions = {
    title: 'To do list',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
  };

  constructor(props){
    super(props);
    this.state = {
      noteArray: [],
      noteText: ''
    };
  }
render() {

    let notes = this.state.noteArray.map((val,key) => {
      return <Note key={key} keyval={key} val={val}
      goToDetailPage= {() => this.goToNoteDetail(key)}
       />
    });
    const { navigation } = this.props;
    return(
        <View style={styles.container}>
         <ScrollView style={styles.scrollContainer}>
                {notes}
            </ScrollView>
           <Details saveEdit={this.saveEdit} />
        </View>

      );
    }
    goToNoteDetail=(key)=>{   
      this.props.navigation.navigate('DetailsScreen', {
        selectedTask: this.state.noteArray[key],
        saveEdit: this.saveEdit
      });
    }
     saveEdit = (editedTask,dueDate) => {
     this.state.noteArray.push({ 
    'creationDate': editedTask['creationDate'], 
    'taskName': editedTask['taskName'],
    'dueDate': dueDate
  });
  this.setState({noteArray:this.state.noteArray})
  this.saveUserTasks(this.state.noteArray) 
}    
      this.setState({noteArray:this.state.noteArray})
      this.saveUserTasks(this.state.noteArray) 
    }     
}

Then I try to use it as prop in my Detail.js

import React from 'react';
import {
    StyleSheet ,
     Text,
     View, 
     TextInput,
     Button,
     TouchableOpacity,

    } from 'react-native'
import { createStackNavigator, createAppContainer } from "react-navigation";

export default class Details extends React.Component {

   constructor(props){
    super(props);
   this.state = {
    dueDate = ''
   }
  }

  static navigationOptions = {
    headerStyle: {
      backgroundColor: '#f4511e',
    },  
  };

  componentDidMount = () => {
  this.getUserTasks()  
  } 
  render() {

    const { navigation } = this.props;
    const selectedTask = navigation.getParam('selectedTask', 'task');
    var { saveEdit} = this.props;

    return(
     <View key={this.props.keyval} style={styles.container}>
      <View style = { styles.info}>
              <Text style= {styles.labelStyle}> Due date:
              </Text>
              <TextInput
                        onChangeText={(dueData) => this.setState({dueData})}
                        style={styles.textInput}
                        placeholder= {selectedTask['dueDate']}  
                        placeholderTextColor='gray'
                        underlineColorAndroid = 'transparent'
                        >
              </TextInput>
      </View>
      <TouchableOpacity onPress={this.props.saveEdit(selectedTask, this.state.dueDate)} style={styles.saveButton}>
                <Text style={styles.saveButtonText}> save </Text>
      </TouchableOpacity>
    </View>
    );
  }
} 

I searched a lot to find the solution and I tried many of them but get different undefined errors. This is not what I did in the first place but when I search I found this solution here. And I know it causes lots of issues. I want to know how can I manage to access to main method from details and pass parameters to it or how can I manage to use main props in my details component

回答1:

Solution

<Details saveEdit={this.saveEdit} />

to

<Details navigation={this.props.navigation} saveEdit={this.saveEdit} />

render() {
    return(
        <View style={styles.container}>
         <ScrollView style={styles.scrollContainer}>
                {notes}
            </ScrollView>
           <Details navigation={this.props.navigation} saveEdit={this.saveEdit} />
        </View>

      );
}

Why?

You are using your Details component in Main screen. So you need to give navigation to Details's props from your Main to use navigation props in Details component.

Because your Details component is not the screen component registered in your navigator(router).

回答2:

I tried to run your code on my machine but it seems you have too many syntax error in your code (maybe because of copy pasta?)

but it seems you should change

<TouchableOpacity onPress={this.props.saveEdit(selectedTask, this.state.dueDate)}

in Detals.js to

<TouchableOpacity onPress={this.props.navigation.getParams('saveEdit')(selectedTask, this.state.dueDate)}

for clarification this worked for me in MainPage.js

    _test(){
      console.log('test');
    }
.
.

.
<ActionButton
     buttonColor="rgba(231,76,60,1)"
     onPress={() => NavigationService.navigate('AddNewSession', {test: this._test})}>
</ActionButton>

and in AddNewSession.js

  componentDidMount() 
    let test = this.props.navigation.getParam('test');
    test();
  }

来源：https://stackoverflow.com/questions/56412797/navigation-getparam-is-undefined-while-trying-to-pass-function-as-parameter