Совместное использование переменных состояния хука React между экранами стека React Navigation?

РЕДАКТИРОВАТЬ: для тех, кто спотыкается, не обращайте внимания на этот вопрос. С моей стороны это была простая ошибка. Совместное использование переменных 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>
  );
}

Как передать мою username переменную состояния с помощью перехватчиков React из моего Main компонента в мой Game компонент? В настоящее время я получаю следующую ошибку в строке {route.params.username} в Game.js:

Объекты недопустимы в качестве дочерних React (найдено: объект с клавишами {replace, push, pop, popToTop, goBack, navigate, reset, setParams, dispatch, isFocused, canGoBack, dangerousGetParent, dangerousGetState, addListener, removeListener, setOptions}).

Я просто хочу передать самое последнее строковое значение username после нажатия кнопки на экране Main (который должен перейти к экрану Game), но похоже, что переданное значение является объектом.


react-native reactjs react-hooks react-navigation react-navigation-v5
person tlaminator    schedule 09.09.2020    source источник
comment
в вашем коде все в порядке, можете ли вы добавить console.log (route.params) и добавить результат к своему вопросу?   -  person Zahra Mirali    schedule 09.09.2020
comment
@SagharMirali просто выводит объект с ключами {replace, push, pop, popToTop, goBack, navigate, reset, setParams, dispatch, isFocused, canGoBack, dangerousGetParent, dangerousGetState, addListener, removeListener, setOptions} Мне просто нужно строковое значение username   -  person tlaminator    schedule 09.09.2020
comment
Я не могу воспроизвести проблему, может быть, создать закуску, которая показывает проблему?   -  person Bas van der Linden    schedule 09.09.2020
comment
@BasvanderLinden snack.expo.io/yMVU0A4cU   -  person tlaminator    schedule 09.09.2020
comment
Здесь полная ошибка: reactjs.org/docs/error-decoder.html/   -  person tlaminator    schedule 09.09.2020

Ответы (1)


arrow_upward
1
arrow_downward

Код, который вы разместили в вопросе, работает нормально, но я думаю, что я обнаружил проблему (ы), посмотрев на вашу закуску.

Во-первых, ваша 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 вы деструктурируете username из параметров, а не playerUserName. Таким образом, деструктурированная переменная username не будет содержать правильного значения.

person Bas van der Linden    schedule 09.09.2020