React Native中props变更时如何触发函数？prevProps属性报未定义错如何解决

报错根因 #

报错是因为初始阶段prevProps.route或prevProps.route.params本身为undefined，直接链式访问深层的connectionString属性触发了类型错误。你当前的判断逻辑没有覆盖上层属性未初始化的边界场景。

最优实现方案 #

方案1：ES2020+ 可选链写法（兼容性满足时首选，最简洁易读） #

通过可选链操作符避免访问未定义对象的属性，同时增加有效值判断，仅当connectionString存在时才发起请求：

componentDidUpdate(prevProps, prevState) {
  const currentConnStr = this.props.route?.params?.connectionString;
  const prevConnStr = prevProps.route?.params?.connectionString;
  // 仅当连接字符串发生变更且当前值有效时调用接口
  if (prevConnStr !== currentConnStr && currentConnStr) {
    this.fetchApiData(currentConnStr);
  }
}

方案2：兼容低版本ES的逐层判空写法 #

如果项目不支持可选链语法，用逐层判空的方式实现相同逻辑：

componentDidUpdate(prevProps, prevState) {
  // 取值前先逐层判断上层对象是否存在
  const getConnStr = (props) => {
    if (!props.route) return undefined;
    if (!props.route.params) return undefined;
    return props.route.params.connectionString;
  };

  const currentConnStr = getConnStr(this.props);
  const prevConnStr = getConnStr(prevProps);

  if (prevConnStr !== currentConnStr && currentConnStr) {
    this.fetchApiData(currentConnStr);
  }
}

额外优化建议 #

• 如果fetchApiData是异步请求，建议在组件卸载时或请求重发前取消上一次未完成的请求，避免竞态问题导致的页面渲染异常，可以用AbortController实现。
• 如果connectionString可能为空字符串等假值，可以根据业务逻辑调整有效值判断条件，比如改成currentConnStr !== undefined。

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