React导航堆栈屏幕之间的React挂钩状态变量共享

Question

编辑：对于那些在这方面磕磕碰碰的人，请忽略这个问题。这对我来说是个简单的错误。屏幕组件之间的React挂钩变量共享工作正常。

我的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组件？目前，我在Game.js中的{route.params.username}行上收到以下错误：

对象作为React子对象无效(已找到：具有键{replace、push、pop、popToTop、goBack、navigation、reset、setParams、dispatch、isFocused、canGoBack、dangerouslyGetParent、dangerous lyGetState、addListener、removeListener、setOptions}的对象(。

我只想在点击Main屏幕中的按钮(应该导航到Game屏幕(后传入username的最新字符串值，但传入的值似乎是一个对象。

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 { 'gameId': gameId, 'playerId': playerId, 'playerUserName': username };

问题是，在Game.js中，您正在从参数而不是playerUserName中销毁username。因此，被破坏的username变量将不会保持正确的值。