React Native新手求助：如何将AJAX请求数据传递至视图

嘿，作为精通原生iOS的开发者刚接触React Native，肯定会有不少从原生到跨平台的适配小问题，别担心，咱们一步步搞定这个数据传递的事儿！

React Native的核心是状态（state）驱动视图——你只需要把AJAX获取到的数据存到组件的state里，当state更新时，视图会自动重新渲染。下面是具体的实现步骤：

1. 完善fetch请求，将数据存入state #

你已经写了请求的基本框架，咱们把它补全，加上响应处理、错误捕获，并且把返回的数据存入state：

// 先在组件的构造函数里初始化state（类组件写法）
constructor(props) {
  super(props);
  this.state = {
    isLoading: false,
    hoursData: [], // 用来存储打卡数据的数组
    errorMessage: '' // 存储错误信息
  };
}

_getHours = () => {
  this.setState({ isLoading: true }); // 开始请求时标记加载状态
  fetch('https://seniordevops.com/clockin/list', {
    method: 'GET',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    credentials: 'include' // 补全credentials参数，根据实际需求调整
  })
  .then(response => {
    // 先判断请求是否成功
    if (!response.ok) {
      throw new Error(`请求失败，状态码: ${response.status}`);
    }
    return response.json(); // 解析返回的JSON数据
  })
  .then(fetchedData => {
    // 数据获取成功，更新state，同时结束加载状态
    this.setState({
      isLoading: false,
      hoursData: fetchedData
    });
  })
  .catch(error => {
    // 捕获请求过程中的错误，更新state提示用户
    console.error('获取打卡数据出错:', error);
    this.setState({
      isLoading: false,
      errorMessage: error.message
    });
  });
};

2. 在render方法中使用state渲染视图 #

当state里的hoursData更新后，React Native会自动触发组件重新渲染，你只需要在render里根据state的状态展示不同内容：

render() {
  const { isLoading, hoursData, errorMessage } = this.state;

  // 加载中状态：显示加载指示器
  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#007AFF" />
      </View>
    );
  }

  // 错误状态：显示错误信息
  if (errorMessage) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 }}>
        <Text style={{ color: '#FF3B30' }}>出错了: {errorMessage}</Text>
        <Button title="重新加载" onPress={this._getHours} />
      </View>
    );
  }

  // 数据正常：渲染打卡列表
  return (
    <View style={{ flex: 1, padding: 16 }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 16 }}>我的打卡记录</Text>
      <FlatList
        data={hoursData}
        keyExtractor={(item, index) => index.toString()} // 根据数据结构调整key，最好用唯一ID
        renderItem={({ item }) => (
          <View style={{ padding: 12, backgroundColor: '#F2F2F7', borderRadius: 8, marginBottom: 8 }}>
            <Text>日期: {item.date}</Text>
            <Text>打卡时长: {item.hours} 小时</Text>
            {/* 这里根据你实际返回的数据字段调整展示内容 */}
          </View>
        )}
      />
    </View>
  );
}

3. 触发请求时机 #

通常我们会在组件挂载完成后自动触发请求，在类组件里可以用componentDidMount生命周期钩子：

componentDidMount() {
  this._getHours(); // 组件挂载后立即获取数据
}

额外小提示 #

• 如果你习惯了iOS的MVC模式，React Native的state就类似ViewModel，视图会自动响应state的变化，不用手动更新UI，这一点和SwiftUI的@State/@ObservedObject很像，相信你很快能适应~
• 如果你的数据结构比较复杂，或者需要在多个组件间共享数据，后续可以学习Redux、Context API等状态管理工具，但目前用state已经能解决你的问题啦！

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