React Native使用NetInfo时报错找不到connectionStatus变量

核心错误原因 #

你将网络状态存在了组件的state中，类组件内访问state属性必须携带this.state前缀，你在render方法中直接写connectionStatus相当于访问全局变量，自然会抛出找不到变量的报错。

修复步骤 #

1. 修正render方法内的状态访问逻辑，把connectionStatus改为this.state.connectionStatus即可直接解决当前报错
2. 额外补充其他潜在问题的修复逻辑，避免后续运行出现其他报错：
   • 修正checkConnected方法的this指向问题
   • 补充断网场景的状态更新逻辑
   • 组件卸载时移除焦点监听，避免内存泄漏

修正后的关键代码片段 #

// 改为箭头函数解决this指向问题，同时补充断网状态更新逻辑
checkConnected = async () => {
  const networkState = await NetInfo.fetch();
  this.setState({ connectionStatus: networkState.isConnected });
}

// 新增卸载生命周期，移除监听避免内存泄漏
componentWillUnmount() {
  this.focusListener.remove();
}

render() {
  let url = this.props.navigation.getParam('webUrl');
  console.log(url) ;

  return (      
    // 补充this.state前缀访问状态变量
    this.state.connectionStatus ? (
      <WebView 
        source={{ uri: url }}  
        renderLoading={this.LoadingIndicatorView}
        startInLoadingState={true}
      /> 
    ) : (
      <View>
        <Text> No Connection !!!!</Text>
      </View>
    )
  )
}

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