仅在第二次 onPress 后更新状态

Question

我正在构建一个 React Native 应用程序，它可以呈现一组平面列表。通过按下一个组，您可以看到嵌套在其中的所有单个项目。

我正在使用以下 this navigation library 并且我正在传递道具：

const navigateToDetails = useCallback(() => {
    Navigation.push(props.componentId, {
      component: {
        name: pagesNames.DETAILS,
        passProps: {
          groupId: selectedGroup,
        },
      },
    });
  });

所有这一切都在一个功能组件中，它有一些更相关的东西，首先我们有让我们选择组的状态和功能：

const [selectedGroup, setSelectedGroup] = useState(Number);

function handleTouch(value) {
    setSelectedGroup(value);
    console.log('value: ' + value);
    navigateToDetails(value);
  }

value 取自 Flatlist 中的项目，该项目从 this fake API 获取数据。

以这种方式从列表中检索值：

<FlatList
        data={data}
        renderItem={({ item }) => (
          <TouchableOpacity
            style={[styles.card, { width: windowWidth - 30 }]}
            onPress={() => handleTouch(item.id)}>
           {misc components}
          </TouchableOpacity>
        )}
      />

预期行为

我希望当我从列表中点击一个项目时，它会导航到详细信息页面并使用其数据填充它。然而，这不会发生。注销 value 和 selectedGroup 后，我发现 value 总是正确注销，但 selectedGroup 总是首先注销为 0。 只有在第二次按下后，它才会显示预期的 id 并填充详细信息页面。

Answer 1

您在设置状态之前被重定向。用 null/undefined/0 初始化 selectedGroup

尝试在 useEffect 中导航

function handleTouch(value) {
    setSelectedGroup(value);
    console.log('value: ' + value);
}

useEffect(() => {
  if (selectedGroup) {
   navigateToDetails(selectedGroup)
  }

}, [selectedGroup, navigateToDetails])