Question

使用React Native和Expo获取用户位置时，我有条件渲染。单击按钮以显示微调框时，我正在更改状态，但是由于某种原因，我的状态变量始终为false。我了解useEffect挂钩，但是我认为我不需要在任何特定的生命周期上更改变量。这是正确的推理吗？起初，我认为这是由于该函数的异步特性引起的，但似乎不太可能。

状态初始化

C:\Users\xxx>ssh-keygen -t rsa -b 2048 -C "azureuser@vm"
Generating public/private rsa key pair.
Enter file in which to save the key (C:\Users\xxx/.ssh/id_rsa): C:\publickey\id_rsa.ppk
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in C:\publickey\id_rsa.ppk.
Your public key has been saved in C:\publickey\id_rsa.ppk.pub.
The key fingerprint is:

onClick代码

const [loading, toggleLoading] = useState(false);

getLocationAsync的代码

{props.location === null ? (
        <Button onPress={getLocationAsync} mode="contained">
          Get Location
        </Button>
      ) : loading === true ? (
        <Button mode="contained">
          <ActivityIndicator />
        </Button>
      ) : (
        <Button mode="outlined">Received</Button>
      )}

任何地方的日志记录状态总会产生错误的加载。在这种情况下，我是否真的需要诸如useEffect之类的东西？

Answer 1

在React中设置状态是异步的！这就是为什么您的日志显示false。

const onPress = () => toggleLoading(true)

useEffect(() => {
  const getLocationAsync = async () => {
    // your actions here
    toggleLoading(false)
  }
  if (loading) getLocationAsync()
}, [loading])

// in your render
<Button {...{ onPress}} mode="contained">Get Location</Button>

如果您这样做，您将100％确保仅在getLocationAsync()时执行loading === true代码！

Answer 2

您确定它不起作用吗？ React中的State也是异步的，因此您的console.log()可能不准确。

我已经created simple example使用了您的代码，它运行良好。三元条件是唯一可能不同的东西。您看不到“正在加载”，因为您的第一个条件是location === null，即使加载时您的条件也是null。我刚刚像这样修改了您的第一个条件：location === null && loading !== true 并且工作正常。

Answer 3

你能尝试

onPress={() => {
   toggleLoading(true);
   getLocationAsync();
}}

无法使用useState更改React状态

3 个答案: