У меня есть простой компонент, который при нажатии кнопки вызывает конечную точку создания новой игры с помощью действия с избыточностью. В ответе я хочу перейти на новый экран с параметром из ответа на вызов API.
Мой компонент выглядит следующим образом:
const HomeScreen = ({
navigation,
room,
user,
newGame
}) => {
return (
<View>
<Button
title="Start new game"
onPress={async () => {
await newGame({ _id: user._id })
navigation.navigate('Lobby', { roomId: room._id })
}}
/>
</View>
)
}
const mapStateToProps = state => {
return {
room: state.room,
user: state.user
};
};
const mapDispatchToProps = {
newGame
};
export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)
room._id
только устанавливается после того, как newGame завершит работу, вызов его в обработчике onClick не вызовет отправку.
Кроме того, вызов этого метода в методе рендеринга, например:
if(room){
navigation.navigate('Lobby', { roomId: room._id })
}
, означает, что этот вызов постоянно вызывается каждый рендер и в конечном итоге в каком-то бесконечном l oop.
Я предполагаю, что мне нужно вызывать навигацию в каком-нибудь излишнем действии? Но я не уверен, как этого достичь, учитывая, что навигация зависит от навигационной стойки, передаваемой каждому дочернему компоненту моего стека навигации.
Как я могу форсировать навигацию по экрану после действия с избыточностью?