首先，那个RootErrorBoundary的提示其实是你的代码里的错误触发了错误边界，但默认的错误边界组件没有实现要求的getDerivedStateFromError方法。不过咱们先解决代码里的实际问题，这些问题才是触发错误的根源：

你的代码里的几个关键问题 #

• 相对路径错误：React Native中直接用/api/v1作为axios请求地址会指向Expo的本地服务器，而不是你的Express后端。你需要替换成后端的完整局域网地址（比如你的电脑IP是192.168.1.100，后端端口是3000的话，地址就是http://192.168.1.100:3000/api/v1）。
• 回调函数的this指向问题：你用了普通函数作为axios的then回调，这里的this不是App组件实例，调用this.setState会直接报错。换成箭头函数就能解决这个问题。
• 拼写错误：渲染时写的{greatings}是拼写错误，应该是{this.state.greetings}；而且如果greetings是数组，直接渲染会有问题，需要处理成可读的文本（比如用join(', ')或者遍历渲染）。
• 缺少错误捕获：没有给axios请求加catch，如果请求失败会抛出未捕获的错误，触发错误边界。

修正后的完整代码 #

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import axios from 'react-native-axios';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      greetings: [],
      error: null, // 新增错误状态，用于展示请求失败提示
    };
  }

  componentDidMount() {
    // 替换成你的Express后端实际局域网地址
    const backendUrl = 'http://192.168.1.100:3000/api/v1';
    axios.get(backendUrl)
      .then((response) => { // 换成箭头函数，保证this指向组件实例
        const greetings = response.data;
        this.setState({ greetings, error: null });
        console.log(greetings);
      })
      .catch((err) => { // 新增错误捕获，避免未处理错误触发错误边界
        console.error('请求失败:', err);
        this.setState({ error: '获取数据失败，请检查后端连接' });
      });
  }

  render() {
    const { greetings, error } = this.state;
    // 如果有错误，优先展示错误提示
    if (error) {
      return (
        <View style={styles.container}>
          <Text style={styles.errorText}>{error}</Text>
        </View>
      );
    }
    return (
      <View style={styles.container}>
        {/* 处理数组渲染，没有数据时显示加载提示 */}
        <Text>{greetings.length > 0 ? greetings.join(', ') : '加载中...'}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  errorText: {
    color: 'red',
    fontSize: 16,
  },
});

export default App;

关于错误边界的额外说明 #

如果之后还是遇到RootErrorBoundary的提示，你可以自己实现一个自定义错误边界组件来包裹你的App，示例如下：

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新状态以显示备用UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 可以在这里记录错误日志，方便排查问题
    console.error('错误边界捕获到错误:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 自定义出错时的备用UI
      return <Text style={{textAlign: 'center', marginTop: 50}}>哎呀，出问题了！</Text>;
    }

    return this.props.children;
  }
}

// 用错误边界包裹App组件
export default function WrappedApp() {
  return (
    <ErrorBoundary>
      <App />
    </ErrorBoundary>
  );
}

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