如何使用StackNavigator传递多个参数？解决getNoteArray函数未识别问题

你遇到的核心问题是函数调用时的this上下文绑定错误，导致getNoteArray()无法被正确识别。下面我们一步步拆解问题并给出解决方案：

问题根源 #

在你的editMethod函数里，this的指向没有正确绑定到组件实例，JavaScript无法找到你定义的getNoteArray函数。另外，我们也可以优化数据传递的逻辑，避免不必要的函数调用。

解决方案1：修复this绑定问题 #

有两种常用方式解决this指向错误：

方式A：在构造函数中手动绑定 #

在组件的构造函数里，把editMethod和getNoteArray的this绑定到组件实例：

constructor(props) {
  super(props);
  // 绑定函数的this指向
  this.editMethod = this.editMethod.bind(this);
  this.getNoteArray = this.getNoteArray.bind(this);
}

getNoteArray(){ 
  return this.state.noteArray; 
} 

editMethod(key){ 
  const {navigate} = this.props.navigation; 
  navigate('EditNote' , {noteArray: this.getNoteArray(), key}); 
}

方式B：用箭头函数定义方法 #

箭头函数会自动继承外层上下文的this，不需要手动绑定：

getNoteArray(){ 
  return this.state.noteArray; 
} 

// 用箭头函数定义editMethod
editMethod = (key) => { 
  const {navigate} = this.props.navigation; 
  navigate('EditNote' , {noteArray: this.getNoteArray(), key}); 
}

解决方案2：简化逻辑，直接传递状态 #

其实你完全可以省去getNoteArray函数，直接把this.state.noteArray作为参数传递，这样更简洁，还能避免函数调用的上下文问题：

editMethod = (key) => { 
  const {navigate} = this.props.navigation; 
  navigate('EditNote' , {noteArray: this.state.noteArray, key}); 
}

额外优化：EditNote页面的参数接收 #

在你的EditNote页面，还有两个小细节可以优化：

1. 获取参数时可以解构赋值，让代码更清晰
2. alert直接打印数组看不到内容，需要转成字符串

修改后的componentDidMount：

componentDidMount(){
  // 解构获取传递的参数
  const { noteArray } = this.props.navigation.state.params;
  this.setState({noteArray});
  // 转成字符串才能看到数组的具体内容
  alert(JSON.stringify(this.state.noteArray));
}

如果你用的是较新版本的React Navigation，推荐用getParam方法获取参数（支持设置默认值）：

componentDidMount(){
  // 第二个参数是默认值，避免参数不存在时出错
  const noteArray = this.props.navigation.getParam('noteArray', []);
  this.setState({noteArray});
  alert(JSON.stringify(this.state.noteArray));
}

这样就能解决函数未识别的问题，同时让数据传递的逻辑更顺畅啦。

内容的提问来源于stack exchange，提问作者user9240225