React Native更新值后仍显示旧值，如何显示最新值？

你遇到的问题核心是：React不会追踪普通JavaScript变量的变化。你用var声明的companyData是普通变量，就算在axios回调里更新了它的值，组件已经完成初始渲染，不会因为普通变量变化而重新渲染，所以JSX里一直显示初始值"james"。

解决方案：使用React状态管理（useState）+ 副作用钩子（useEffect） #

要让React感知到数据变化并更新视图，必须用React提供的状态变量，同时把数据请求放在副作用钩子useEffect里避免重复请求。

修改后的完整代码：

import React, { useState, useEffect } from 'react';
import { View, Text } from 'react-native'; // 假设是React Native项目，根据实际情况调整
import axios from 'axios';

function Home(props) {
  // 用useState声明状态变量，初始值为"james"
  const [companyData, setCompanyData] = useState("james");

  // 用useEffect处理数据请求，空数组依赖表示仅在组件挂载时执行一次
  useEffect(() => {
    axios
      .post(
        "https://…..",
        // post的第二个参数是请求体（data）
        { action: "asdf" },
        // 第三个参数是请求配置
        {
          withCredentials: true,
          headers: {
            "Cache-Control": "no-cache, no-store, must-revalidate",
            Pragma: "no-cache",
            Expires: 0,
          },
          auth: {
            username: "",
            password: "",
          },
        }
      )
      .then(function (response) {
        // 用setCompanyData更新状态，触发组件重渲染
        setCompanyData(response.data);
        console.log(response.data);
      })
      .catch(function (error) {
        console.error(error);
      });
  }, []); // 空依赖数组确保只执行一次请求

  return (
    <View>
      <Text>{companyData}</Text>
    </View>    
  ) 
}

export default Home;

关键说明： #

• useState：React的状态管理钩子，通过setCompanyData更新状态时，React会自动检测到状态变化，触发组件重新渲染，此时JSX就会显示最新的companyData值。
• useEffect：用来处理组件的副作用（比如数据请求、DOM操作等），第二个参数传空数组[]，表示这个副作用只在组件第一次挂载时执行，避免每次组件渲染都重复发起axios请求。
• axios参数修正：原代码中post的参数格式有误，post的第二个参数是请求体（即你要发送的data），第三个参数才是请求配置（headers、auth、withCredentials等），调整后请求才能正常发送。

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