React Native函数无法更新变量问题求助

嘿，我仔细看了你的代码，发现几个核心问题导致变量更新后界面没变化，咱们一步步来解决：

1. 普通变量无法触发组件重新渲染 #

React Native里，用var声明的普通变量更新后，组件不会自动重新渲染——你得用React的useState钩子来管理需要在界面上展示的可变数据。状态变量更新时，React会自动重新渲染组件，把最新值展示出来。

2. onPress事件绑定错误 #

你现在写的onPress={initServerData('127.0.0.1', '25565')}会在组件刚加载时就执行这个函数，而不是点击按钮的时候才执行。得改成回调函数的形式，让点击事件触发时再调用它。

3. 函数内部变量作用域问题 #

你在initServerData和handleServerStatus里又用var重新声明了serverIpNew、error这些变量，这会让它们变成函数内部的局部变量，外层的变量根本没被更新，自然界面也看不到变化。

修复后的完整代码 #

我把你的代码调整了一下，关键修改都标出来了：

import { StyleSheet, Text, Image, Button, View } from 'react-native';
import { useState } from 'react'; // 导入useState钩子

export default function App() {
  // 用useState声明状态变量，初始值设为null
  const [error, setError] = useState(null);
  const [serverIpNew, setServerIpNew] = useState(null);
  const [motd, setMotd] = useState(null);
  const [playerCount, setPlayerCount] = useState(null);

  function initServerData(serverIp, serverPort){
    let currentServerIpNew;
    // 简化IP判断逻辑
    if(serverIp === "127.0.0.1"){
      currentServerIpNew = "Name";
    } else {
      currentServerIpNew = serverIp;
    }

    // 用空值合并运算符简化端口默认值设置
    const serverPortNew = serverPort ?? 25565;

    // 模板字符串拼接URL更清晰
    fetch(`https://mcapi.us/server/status?ip=${serverIp}&port=${serverPortNew}`)
      .then(response => response.json())
      .then(data => handleServerStatus(data, currentServerIpNew, serverIp) );
  }

  function handleServerStatus(data, currentServerIpNew, originalIp){
    if(data.status === 'error'){
      console.log(data.error);
      // 更新error状态，用换行符替代<br>（React Native不支持HTML标签）
      setError(`ERROR | The Server does not exist or the Server is Offline\nServer IP:\n${currentServerIpNew} (${originalIp})`);
      // 清空其他状态避免旧数据残留
      setMotd(null);
      setPlayerCount(null);
      setServerIpNew(currentServerIpNew);
      return;
    }
    // 更新正常状态
    setServerIpNew(currentServerIpNew);
    setMotd(data.motd);
    setPlayerCount(`${data.players.now}/${data.players.max}`);
    setError(null); // 清空错误信息
  }

  return (
    <View style={styles.container}>
      <Button
        title="Press me"
        onPress={() => initServerData('127.0.0.1', '25565')} {/* 改成回调函数 */}
      />
      <View style={styles.serverOutline}> {/* React Native用style替代class，样式名驼峰化 */}
        <View style={styles.server}>
          {/* 条件渲染：只有error存在时才显示 */}
          {error && <Text>{error}</Text>}
          <Image
            style={styles.tinyLogo}
            source={{
              uri: 'https://img.freepik.com/vetores-gratis/glitch-error-404-page_23-2148105404.jpg',
            }}
          />
          <View style={styles.info}>
            {serverIpNew && <Text>{serverIpNew}</Text>}
            {motd && <Text>{motd}</Text>}
            <View style={styles.playerCount}>
              {playerCount && <Text>{playerCount}</Text>}
              <Text>Players are Online</Text>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}

// 样式对象的键用驼峰命名，符合React Native规范
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  serverOutline: {
    marginTop: 20,
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 5,
  },
  server: {
    alignItems: 'center',
  },
  tinyLogo: {
    width: 100,
    height: 100,
    marginVertical: 10,
  },
  info: {
    alignItems: 'center',
  },
  playerCount: {
    flexDirection: 'row',
    gap: 5,
    marginTop: 5,
  },
});

额外说明 #

• React Native里不支持HTML的<br>标签，我换成了换行符\n
• 样式属性要用style而不是class，并且样式名要改成驼峰格式（比如server_outline→serverOutline）
• 加了条件渲染（{error && <Text>{error}</Text>}），避免状态为null时显示空内容

这样修改后，点击按钮触发请求，状态更新后界面就会同步显示最新的数据啦！

备注：内容来源于stack exchange，提问作者DevOpsDavid