英文:

React Native | A function does not update variables

问题 {#heading}

I am currently programming a mobile app with which you can check whether a Minecraft server is online or not. Actually everything works but the variables in which I write the output are not updated.
Can someone please help me?

My Code:

import { StyleSheet, Text, Image, Button, View } from 'react-native';

export default function App() {
  var error
  var serverIpNew
  var motd
  var playerCount

  function initServerData(serverIp, serverPort){
    if(serverIp == "127.0.0.1"){
        var serverIpNew = "Name";
    } else {
        if(serverIp == "127.0.0.1"){
            var serverIpNew = "Name";
        } else {
            var serverIpNew = serverIp;
        }
    }

    if(serverPort == null){
        var serverPortNew = 25565;
    } else {
        var serverPortNew = serverPort;
    }

    fetch('https://mcapi.us/server/status?ip='+serverIp+'&port='+ serverPortNew)
    .then(response => response.json())
    .then(data => handleServerStatus(data) );

    function handleServerStatus(data){
        if(data.status=='error'){
            console.log(data.error);
            var error = 'ERROR | The Server does not exist or the Server is Offline <br> Server IP: <br>' + serverIpNew + ' (' + serverIp + ')';
            return false;
        }

        var motd = data.motd;
        var playerCount = data.players.now + "/" + data.players.max;
    } 
  }

  return (
    <View style={styles.container}>
      <Button
        title="Press me"
        onPress={initServerData('127.0.0.1', '25565')}
      />
      <View class="server_outline">
        <View class="server" id="server">
          <Text>{error}</Text>
              <Image
                style={styles.tinyLogo}
                source={{
                  uri: 'https://img.freepik.com/vetores-gratis/glitch-error-404-page_23-2148105404.jpg',
                }}
                id="server-icon"
                class="icon"
              />
              <View class="info">
                <Text id="server-ip">{serverIpNew}</Text>
                <Text id="motd">{motd}</Text>
                <View class="player-count">
                    <Text id="player-count">{playerCount}</Text>
                    <Text>Players are Online</Text>
                </View>
            </View>
        </View>
      </View>
    </View>
  );
}

Some text that I can ask this question:

Lorem ipsum dolor sit amet. Aut esse sapiente in ullam officiis vel quas voluptatem eum sint nesciunt id sapiente omnis? Quo eveniet vero eos voluptatem perspiciatis 33 culpa quia non deleniti minus aut architecto facilis ab explicabo voluptatem et earum sint. Qui ipsa molestiae cum sapiente voluptatem in voluptas iusto ut inventore sunt vel dolorem sapiente est consequatur consequatur. Vel nemo assumenda et dolor sequi ea voluptatem suscipit vel omnis error ut amet iure eum facere maiores.

Quo veritatis iusto qui nisi modi aut explicabo nobis ab voluptatum quod. Vel voluptatibus consequuntur est voluptas natus vel culpa provident sit dignissimos dolorem et explicabo atque id internos dolor id quis quos! Aut voluptate laudantium sed aliquid illum sed Quis quia ad consequatur minus sed similique doloremque id nihil praesentium ut laborum voluptatum. Qui quisquam ipsum in quia tempora aut quia quia et eius modi et illo dolorum sit fugit consequatur ab alias quia!

Ad libero corporis et itaque rerum et doloremque quasi ut esse rerum. Aut dolorem perspiciatis qui odit distinctio non praesentium omnis. Eum dolores laudantium ea incidunt atque in sequi veritatis quo aliquam facilis eum ducimus architecto id nesciunt ducimus et ipsa corporis. Et tempore minus est galisum totam ab molestiae sequi. 英文:

I am currently programming a mobile app with which you can check whether a Minecraft server is online or not. Actually everything works but the variables in which I write the output are not updated.
Can someone please help me?

My Code:

import { StyleSheet, Text, Image, Button, View } from 'react-native';
export default function App() {
var error
var serverIpNew
var motd
var playerCount
function initServerData(serverIp,serverPort){
if(serverIp == "127.0.0.1"){
var serverIpNew = "Name";
} else {
if(serverIp == "127.0.0.1"){
var serverIpNew = "Name";
} else {
var serverIpNew = serverIp;
}
}
if(serverPort == null){
var serverPortNew = 25565;
} else {
var serverPortNew = serverPort;
}
fetch('https://mcapi.us/server/status?ip='+serverIp+'&port='+ serverPortNew)
.then(response => response.json())
.then(data => handleServerStatus(data) );
function handleServerStatus(data){
if(data.status=='error'){
console.log(data.error);
var error = 'ERROR | The Server does not exist or the Server is Offline <br> Server IP: <br>' + serverIpNew + ' (' + serverIp + ')';
return false;
}
var motd = data.motd;
var playerCount = data.players.now + "/" + data.players.max;
} 
}
return (
<View style={styles.container}>
<Button
title="Press me"
onPress={initServerData('127.0.0.1', '25565')}
/>
<View class="server_outline">
<View class="server" id="server">
<Text>{error}</Text>
<Image
style={styles.tinyLogo}
source={{
uri: 'https://img.freepik.com/vetores-gratis/glitch-error-404-page_23-2148105404.jpg',
}}
id="server-icon"
class="icon"
/>
<View class="info">
<Text id="server-ip">{serverIpNew}</Text>
<Text id="motd">{motd}</Text>
<View class="player-count">
<Text id="player-count">{playerCount}</Text>
<Text>Players are Online</Text>
</View>
</View>
</View>
</View>
</View>
);
}

Some text that I can ask this question:

Lorem ipsum dolor sit amet. Aut esse sapiente in ullam officiis vel quas voluptatem eum sint nesciunt id sapiente omnis? Quo eveniet vero eos voluptatem perspiciatis 33 culpa quia non deleniti minus aut architecto facilis ab explicabo voluptatem et earum sint. Qui ipsa molestiae cum sapiente voluptatem in voluptas iusto ut inventore sunt vel dolorem sapiente est consequatur consequatur. Vel nemo assumenda et dolor sequi ea voluptatem suscipit vel omnis error ut amet iure eum facere maiores. </p><p>Quo veritatis iusto qui nisi modi aut explicabo nobis ab voluptatum quod. Vel voluptatibus consequuntur est voluptas natus vel culpa provident sit dignissimos dolorem et explicabo atque id internos dolor id quis quos! Aut voluptate laudantium sed aliquid illum sed Quis quia ad consequatur minus sed similique doloremque id nihil praesentium ut laborum voluptatum. Qui quisquam ipsum in quia tempora aut quia quia et eius modi et illo dolorum sit fugit consequatur ab alias quia! </p><p>Ad libero corporis et itaque rerum et doloremque quasi ut esse rerum. Aut dolorem perspiciatis qui odit distinctio non praesentium omnis. Eum dolores laudantium ea incidunt atque in sequi veritatis quo aliquam facilis eum ducimus architecto id nesciunt ducimus et ipsa corporis. Et tempore minus est galisum totam ab molestiae sequi.

答案1 {#1}

得分: 1

你应该了解React生命周期。如果你想保留你设置的值，你应该使用useState函数。要了解更多信息，请参阅以下文档：https://react.dev/learn/managing-state 英文:

You should read about react lifecycle. You should useState function if you want preserve the values that you set. To know more about, here you have documentation: https://react.dev/learn/managing-state