React Native渲染Axios获取的静态对象无显示问题求助

问题根源 #

你直接用全局变量res存储请求返回的数据，但React组件仅在状态（state）或属性（props）变更时才会触发重新渲染。修改全局变量不会通知React更新视图，所以即便请求成功拿到数据，页面也不会同步显示。

修正后的客户端代码 #

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

export default function App() {
  // 用useState定义状态存储车辆数据，初始值设为null
  const [carData, setCarData] = useState(null);
  // 用useState定义加载状态
  const [loading, setLoading] = useState(true);

  // 用useEffect在组件挂载时发起请求，空依赖数组确保只执行一次
  useEffect(() => {
    axios.get('http://x.x.x.x:x/rec')
      .then(response => {
        console.log(response.data);
        // 用setCarData更新状态，触发组件重新渲染
        setCarData(response.data);
        setLoading(false);
      })
      .catch(error => {
        console.error('请求出错:', error);
        setLoading(false);
      });
  }, []);

  // 处理加载中状态
  if (loading) {
    return (
      <View style={styles.container}>
        <Text>加载中...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      {/* 判断carData存在后再渲染，避免空值报错 */}
      {carData ? (
        <Text>This car is a : {carData.type} {carData.model}</Text>
      ) : (
        <Text>未能获取车辆数据</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 100,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

服务器代码优化 #

不需要手动将对象转为JSON字符串，Express的res.send会自动处理并设置正确的响应头：

const app = require('express')();

const car = {
  type: "Fiat",
  model: "500"
};

app.get("/rec", (req, res) => {
  res.send(car); // 直接发送对象，Express自动转为JSON
  console.log("Took Car");
});

app.get("/", (req, res) => {
  res.set('Content-Type', 'text/plain');
  res.send("You have done it ");
  console.log("Took /");
});

var listener = app.listen(8888, () => {
  console.log(listener.address().port);
});

关键说明 #

1. useState：用于定义组件内部状态，状态变更时React会自动重新渲染组件。
2. useEffect：用于处理组件的副作用（比如HTTP请求），空依赖数组[]表示只在组件挂载和卸载时执行一次。
3. 数据渲染判断：添加carData存在性判断，避免请求未完成时渲染空值导致报错。

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