return from navigation in react native give me undefined in this.props.navigation.state.params.filePath

问题

i need help :). my project is 2 pages in react native, MainPage and SoundRecord. my init screen is MainPage and when i press the button 'take sound' i move to another component to record sound(i move with react native navigation). when i come back i want to return the filePath(where it save the file..). i want to insert it to the state.

when i do this in MainPage:

this.state{
filePath: this.props.navigation.state.params.filePath
}

it give error: undefined is not an object(evaluating 'this.props.navigation.state.params.filePath') and i understand this because i start my project with MainPage and i dont have the filePath from the SoundRecord page.

what can i do? can i do check if this.props.navigation.state.params.filePath !== undefined? how to do it? i try almost everything...

i put the relevant code:

MainPage:

    import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import ImagePicker from 'react-native-image-picker';
import { RNS3 } from 'react-native-aws3';
import { aws } from './keys';
import SoundRecord from './SoundRecord'

  export default class MainPage extends Component {
    constructor(props){
        super(props);
        this.state={
            file:'' ,
            config:'',
            filePath: '',
            fileName: '',
            tag:''
        };
      }
  MoveToSoundRecordPage = () => {
    this.props.navigation.navigate('SoundRecord');
  }
  render() {
        return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.MoveToSoundRecordPage}>
          <Text>take sound</Text>
        </TouchableOpacity>
        {/* <SoundRecord takeSound={this.takeSound}/> */}
        <Text>{this.state.fileName}</Text>
        <TouchableOpacity onPress={this.UploadToAWS.bind(this)}>
          <Text>Upload To Aws</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

SoundRecord when i finish to record i send the filePath like this:

finishRecord = (filePath) => {
this.props.navigation.navigate('MainPage',{filePath});

}

thank!

回答1:

If you want to update something on the previous page then you can do it in the following way.

1. Create a function in the MainPage that updates the state with the new filepath.
2. Pass the function as as a param.
3. Use the passed function in SoundRecord to update the state in the MainPage

MainPage

In your MainPage add the following

sendFilepath = (filePath) => {
  this.setState({filePath})
}

Update the MoveToSoundRecordPage function to take the sendFilepath as a parameter:

MoveToSoundRecordPage = () => {
  this.props.navigation.navigate('SoundRecord', { sendFilepath: this.sendFilepath });
}

SoundRecord

Then in the SoundRecord page you want to update the finishRecord so that it calls the function that you have passed.

finishRecord = (filePath) => {
  this.props.navigation.state.params.sendFilepath(filePath)
  this.props.navigation.goBack();
}

Snack

Here is a snack https://snack.expo.io/@andypandy/navigation-passing-function that shows passing a function called sendFilepath from Screen1 to Screen2. Then in Screen2 it then calls the function that was passed and this updates the state in Screen1.

回答2:

Please try this. It may help you

Add this in MainPage screen:

componentWillMount() {
  const filePath = this.props.navigation.getParam('filePath', '');
  this.setState({ filePath:filePath })
}

来源：https://stackoverflow.com/questions/54354499/return-from-navigation-in-react-native-give-me-undefined-in-this-props-navigatio