状态仅在第二次 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])

状态仅在第二次 onPress 后更新

State updating only after second onPress

reactjs

react-native

react-hooks

react-native-navigation

wix-react-native-navigation