React Native初始页面获取导航参数崩溃问题咨询

嘿，这个问题我之前帮不少开发者解决过——当HomeScreen作为初始路由加载时，navigation对象里还没有从CategoryListScreen传过来的itemCategory参数，直接访问this.props.navigation.state.params.itemCategory自然会因为值为undefined导致崩溃。而把CategoryListScreen设为初始路由时，跳转HomeScreen会带上参数，所以能正常工作。下面给你几个靠谱的解决方案：

1. 用navigation.getParam带默认值兜底 #

React Navigation专门提供了getParam方法，能在参数不存在时返回你指定的默认值，完美避免undefined错误。你其实已经试过这个方向，咱们再优化下：

在HomeScreen的构造函数里这样初始化state：

constructor(props) {
  super(props);
  this.state = {
    // 当没有传itemCategory时，默认给空字符串，也可以设成你想展示的默认类别比如'Burger'
    categories: props.navigation.getParam('itemCategory', ''),
    restaurantData: [],
  };
}

这样哪怕是第一次启动进入HomeScreen，categories也会有一个合法值，不会让应用崩掉。

2. 用可选链操作符安全访问嵌套属性 #

如果你的项目支持ES2020及以上语法，用?.可选链操作符会更简洁，它会自动检查每一层属性是否存在，不存在就直接返回undefined，不会抛出错误：

constructor(props) {
  super(props);
  this.state = {
    // 用可选链+||兜底，确保categories永远有值
    categories: this.props.navigation.state?.params?.itemCategory || '',
    restaurantData: [],
  };
}

3. 监听参数变化，自动更新数据 #

另外，当用户从CategoryListScreen选完类别跳回HomeScreen时，你需要更新categories状态并重新调用API获取对应餐厅。这时候可以用componentDidUpdate来监听参数变化：

componentDidUpdate(prevProps) {
  // 拿到当前和之前的类别参数
  const currentCategory = this.props.navigation.getParam('itemCategory', '');
  const prevCategory = prevProps.navigation.getParam('itemCategory', '');
  
  // 如果参数变了，就更新状态并重新请求数据
  if (currentCategory !== prevCategory) {
    this.setState({ categories: currentCategory }, () => {
      this.getRestaurantByCategories(currentCategory);
    });
  }
}

这样用户选完类别回来，HomeScreen会自动更新内容，不用手动刷新。

给你改好的HomeScreen核心代码 #

export default class HomeScreen extends React.Component {
  static navigationOptions = ({navigation}) => ({
    title: 'Home',
    headerLeft: () => (
      <Hamburger onPress={() => { navigation.openDrawer() }} />
    ),
    headerRight: () => (
      <ShoppingCartButton onPress={() => { navigation.navigate('CartScreen') }} />
    ),
  })

  constructor(props) {
    super(props)
    // 安全初始化categories
    this.state = {
      categories: props.navigation.getParam('itemCategory', ''),
      restaurantData: [],
    }
  }

  componentDidMount() {
    console.log('dans le componentdidmount : ', this.state.categories);
    // 初始加载时，如果有类别就请求对应餐厅，否则加载所有餐厅
    if (this.state.categories) {
      this.getRestaurantByCategories(this.state.categories);
    } else {
      this.getRestaurant();
    }
  }

  componentDidUpdate(prevProps) {
    const currentCategory = this.props.navigation.getParam('itemCategory', '');
    const prevCategory = prevProps.navigation.getParam('itemCategory', '');
    
    if (currentCategory !== prevCategory) {
      this.setState({ categories: currentCategory }, () => {
        this.getRestaurantByCategories(currentCategory);
      });
    }
  }

  // 其他原有方法保持不变...
}

额外小建议 #

• 初始进入HomeScreen时，如果没有选中类别，你可以默认显示所有餐厅（就像你现在的getRestaurant方法），或者加个提示让用户先选类别。
• 如果业务允许，也可以把初始路由设为CategoryListScreen，让用户必须先选类别再进HomeScreen，从根源避免参数不存在的问题~

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