无法使用 useState 更改 React 状态

Question

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

状态初始化

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

onClick 代码

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

getLocationAsync 的代码

const getLocationAsync = async () => {
    toggleLoading(true);
    let { status } = await Permissions.askAsync(Permissions.LOCATION);

    if (status !== "granted") { }

    let location = await Location.getCurrentPositionAsync();
    toggleLoading(false);
  };

在任何地方记录状态总是会导致加载为假。在这种情况下，我真的需要类似 useEffect 的东西吗？

Answer 1

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

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

Answer 2

在 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 3

你可以试试

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