Question

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

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

let theme = createMuiTheme();
theme = responsiveFontSizes(theme);

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

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

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

value 取自 function handleTouch(value) { setSelectedGroup(value); console.log('value: ' + value); navigateToDetails(value); } 中的一个项目，该项目从 this fake API 获取其数据。

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

Flatlist

预期行为

我希望当我点击列表中的一个项目时，它会导航到“详细信息”页面并用其数据填充它。然而，这不会发生。注销 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 后更新

1 个答案: