React Native求助：Fetch中使用Navigation参数时location字段值为空

嘿，作为React Native新手碰到这种参数传递的问题很正常，我来帮你一步步排查和解决～

首先，你遇到的核心问题是location参数在Fetch请求里没有值，而type正常，这大概率是参数没有正确传递到目标页面，或者获取参数的方式不对，我们来逐个排查：

1. 先确认参数是否真的传过来了 #

在你的componentDidMount里先加一行日志，看看导航参数到底是什么：

componentDidMount() {
  // 先打印导航参数，确认location是否存在
  console.log('当前页面的导航参数:', this.props.navigation.state.params);
  // 你的原有代码...
}

如果打印出来的params里没有location，那问题出在跳转页面时的传参步骤，你需要检查跳转代码是否正确，比如：

// 跳转目标页面时的代码，确保正确传递location
this.props.navigation.navigate('你的目标页面名称', {
  location: '这里是你要传递的位置值' // 比如从状态或输入框中获取的真实值
});

注意键名要完全一致，别把location拼成locaiton这种拼写错误！

2. 检查React Navigation版本对应的参数获取方式 #

如果你用的是React Navigation 5及以上版本，原来的this.props.navigation.state.params写法已经过时了，类组件需要通过route来获取参数：

componentDidMount() {
  // v5+类组件获取参数的正确方式
  const { route } = this.props;
  console.log('导航参数:', route.params);
  const location = route.params?.location || ''; // 用可选链避免undefined报错
  var data = {
    type: 'r',
    location: location
  }
  // 后续Fetch代码...
}

如果还是用旧版本的写法，在v5+里会获取不到参数，导致location为undefined，而JSON.stringify会自动忽略值为undefined的键，所以请求里就看不到location了。

3. 处理参数可能为undefined的情况 #

即使参数传对了，也有可能出现location为undefined的情况（比如跳转时忘了传），这时候可以给它加个默认值，避免被JSON.stringify忽略：

const { params } = this.props.navigation.state;
// 用可选链和默认值确保location有值
const location = params?.location || ''; // 或者设个默认的位置值
var data = {
  type: 'r',
  location: location
}

修改后的完整代码示例 #

componentDidMount() {
  // 先确认参数情况
  console.log('导航参数:', this.props.navigation.state.params);
  const { params } = this.props.navigation.state;
  // 处理参数，避免undefined
  const location = params?.location || '';
  
  var data = {
    type: 'r',
    location: location
  }
  // 打印请求数据，确认location是否存在
  console.log('即将发送的请求数据:', data);

  return fetch('http://myapisite', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data)
  } )
  .then((response) => response.json())
  .then((responseJson) => {
    this.setState({
      isLoading: false,
      dataSource: responseJson,
    });
  })
  .catch((error) => {
    console.error(error);
  });
}

按照上面的步骤排查，应该就能解决location参数无值的问题啦～

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