Question

编辑：对于那些绊脚石的人，请忽略这个问题。对我来说，这是一个简单的错误。屏幕组件之间的React Hook变量共享工作正常。

我的App.js文件如下所示

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Main from './src/Main';
import Game from './src/Game';
const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={Main} />
        <Stack.Screen name="Game" component={Game} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

Main.js（相关部分）

export default function Main({ navigation }) {
  const [username, setUsername] = useState(null);
  ...
  <TextInput
    mode='outlined'
    label='Enter username here'
    onChangeText={text => setUsername(text)}
  />
  <Button
    mode='contained'
    onPress={() => 
      navigation.navigate('Game', {'username': username})
    }
  >
    Create
  </Button>
  ...

Game.js（相关部分）

export default function Game({ navigation, route }) {
  return (
    <View>
      <Text>
        {route.params.username}
      </Text>
    </View>
  );
}

如何使用React钩子将username组件的Main状态变量传递到Game组件？目前，我在{route.params.username}的{{1}}行上收到以下错误：

对象作为React子对象无效（找到：带有键{replace，push，pop，popToTop，goBack，导航，重置，setParams，dispatch，isFocused，canGoBack，dangerallyGetParent，dangerallyGetState，addListener，removeListener，setOptions}的对象））。

我只想传入Game.js屏幕上的按钮（应该导航到username屏幕上的按钮之后，Main的最新字符串值），但是似乎传入的值是一个对象。

Answer 1

您在问题中发布的代码可以正常工作，但我认为我是通过查看您的零食发现问题的。

第一件事是您的utils.createGame函数需要一个参数username，但是您将navigation传递给它和username是这样的：

onPress={() =>
  utils.createGame(navigation, username).then(payload => {
    navigation.navigate("Game", payload);
  })
}

因此，请删除navigation作为参数：

onPress={() =>
  utils.createGame(username).then(payload => {
    navigation.navigate("Game", payload);
  })
}

utils.addPlayer的情况也一样，该函数接受两个参数，但是您传递三个参数。

要提供更多上下文，同时还要解决另一个问题，请更改对此的定义utils：

const utils = {
  createGame: async function(username) {
    const gameId = cryptorandomstring({ length: 6, type: 'distinguishable' });
    const playerId = cryptorandomstring({ length: 10 });

    return { 'gameId': gameId, 'creatorId': playerId, 'username': username };
  },

  addPlayer: async function(username, gameId) {
    const playerId = cryptorandomstring({ length: 10 });

    return { 'gameId': gameId, 'playerId': playerId, 'username': username };
  }
}

在addPlayer内，您有一个如下的return语句：

return { 'gameId': gameId, 'playerId': playerId, 'playerUserName': username };

与此相关的问题是，Game.js内部是从参数而非username破坏playerUserName的构造。因此，经过解构的username变量将无法保持正确的值。

在React Navigation堆栈屏幕之间共享React Hook状态变量？

1 个答案: