使用 Hooks API：React 是否尊重 setState 顺序？

Question

我对 React 的了解并不多，但我边走边学。我在学校学习了基础知识，使用类组件（经典 React），但现在我正在研究 Hooks API（主要是因为我发现它更容易学习和管理，尽管似乎涉及更多关于异步行为的技巧） .所以我的问题可能看起来很愚蠢。

我发现 this thread 关于同一主题的 setState 行为，但这是关于类组件的。

在我当前的应用程序中，我尝试使用事件处理程序设置三种不同的状态。似乎最后一个状态是立即设置的，而其他两个状态在更改为实际值之前保持未定义一段时间。我正在使用 React-Native 组件进行移动开发，因此您会在 <SafeAreaView> 等代码中看到 sn-ps。

export default App = () => {
    const [ destLong, setDestLong ] = useState();
    const [ destLat, setDestLat ] = useState();
    const [ startNav, setStartNav ] = useState(false);
    const [ locations, setLocations ] = useState([
        {
            name: 'IKEA',
            long: '-74.00653395444186',
            lat: '40.68324646680103',
        },
        {
            name: 'JFK Intl. Airport',
            long: '-73.78131423688552',
            lat: '40.66710279890186',
        },
        {
          name: 'Microcenter',
          long: '-74.00516039699959',
          lat: '40.67195933297655',
        }
    ]);

    const startNavigation = (goinglong, goinglat) => {
        setDestLong(goinglong);
        setDestLat(goinglat);
        setStartNav(true);
    }

    return (
        <SafeAreaView style={styles.container}>
          { startNav ? 
            <MapView 
              destLong = {destLong}
              destLat = {destLat}
            />
            :
            <View style={styles.buttonContainer}>
              <ScrollView>
                {
                  locations.map((location, i) => {
                    return(
                      <Card
                        style={styles.card}
                        key={i}
                        title={ location.name }
                        iconName="home"
                        iconType="Entypo"
                        description={ location.long + ", " + location.lat }
                        onPress={() => startNavigation(location.long, location.lat)}
                      />
                    );
                  })
                }
              </ScrollView>
            </View>
          }
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    buttonContainer: {
      width: '100%',
      height: '100%',
      justifyContent: 'center',
      alignItems: 'center'
    },
    logo: {
      width: '50%',
      height: '50%',
      resizeMode: 'contain'
    },
    card: {
      marginBottom: 10,
    }
  });

这会引发错误，因为 MapView 期望 destLong 和 destLat 正确呈现。当我在 startNavigation 函数中进行控制台登录时，它似乎立即将 startNav 的状态更新为 true onPress，但 destLong 和 destLat 在设置之前保持未定义几个周期。

我尝试过这样的不同方法：

    useEffect(() => {
        setStartNav(true);
    }, [destLong]);

    const startNavigation = (goinglong, goinglat) => {
        setDestLong(goinglong);
        setDestLat(goinglat);
    }

但它只会让应用程序崩溃（我猜是无限循环）。

我也尝试过完全删除 startNav 状态并像这样在 destLong 上呈现 <MapView>

{ destLong ? 
<MapView 
    destLong = {destLong}
    destLat = {destLat}
/>
:
<View style={styles.buttonContainer}>
    ...
</View>
}

但这也不起作用。

---

这让我想到了这个问题：Hooks API 是尊重 setState 的顺序，还是彼此异步执行？据我了解是后者。但是，您如何处理这种行为？

Answer 1

我也在这里添加我的评论，因为我无法在上面的评论中添加正确的格式。

通过useState 设置状态实际上是异步的，或者更确切地说，状态更改被排入队列，然后在重新渲染后返回其新值。这意味着无法保证设置状态的顺序。它们会按顺序开火，但可能不会按相同顺序设置。

您可以在此处阅读更多信息：https://dev.to/shareef/react-usestate-hook-is-asynchronous-1hia，以及此处https://blog.logrocket.com/a-guide-to-usestate-in-react-ecb9952e406c/#reacthooksupdatestate

在你的情况下，我会像这样使用useState 和useEffect：

useEffect(() => {
    if(destLong && destLat && !startNav) {
        setStartNav(true);
    }
}, [destLong, destLat, startNav]);

const startNavigation = (goinglong, goinglat) => {
    setDestLong(goinglong);
    setDestLat(goinglat);
}

话虽如此，我认为您可以通过完全省略 startNav 状态并更新您的条件渲染来进一步简化代码：

{ (destLat && destLong) ? 
    <MapView 
      destLong = {destLong}
      destLat = {destLat}
    />
    :
    <View style={styles.buttonContainer}>
      ...
    </View>
  }

上面应该有相同的效果，因为你有两个未定义的状态，当它们都被定义时，你想渲染一些东西并使用它们的值。

如果您想再次显示选项，您可以通过 setDestLat(undefined) 和 setDestLong(undefined) 再次将状态设置为未定义