Невозможно получить данные с помощью Context API React Native

Question

Я пытаюсь изучить Context API, вводя имя пользователя на одном экране и отображая его на экране пароля. Моя проблема в том, как я могу отобразить это имя пользователя. То, как я пытаюсь, ничего не показывает. Я знаю, что это как-то связано с тем, как я передаю значение при упаковке моего компонента.

Регистрация. js (Главный компонент)

import Username from './Username';
import Password from './Password'
import { SignUpContext } from './context';


const Stack = createStackNavigator();

const Signup = () => {

  const signUpDetails = {
    username: null,
    password: null,
  }

  const signUpReducer = (prevState, action) => {
    switch (action.type) {
      case 'USERNAME':
        return {
          ...prevState,
          username: action.username,
        };
      case "PASSWORD":
        return {
          ...prevState,
          password: action.password,
        };
    }
  }

  const [signupState, dispatch] = React.useReducer(signUpReducer, signUpDetails)

  const signupContext = React.useMemo(() => ({
    sendUsername: (username) => {
      dispatch({ type: "USERNAME", username });
    },
  }))

  return (
    <SignUpContext.Provider value={signupContext}>
      <Stack.Navigator>
        <Stack.Screen name='Username' component={Username} options={{ headerShown: false }} />
        <Stack.Screen name='Password' component={Password} options={{ headerShown: false }} />
      </Stack.Navigator>
    </SignUpContext.Provider>
  )
}

export default Signup;

Имя пользователя. js

import { SignUpContext } from './context';


const Username = ({ navigation }) => {
    const [data, setData] = React.useState({
        username: '',
    })

    const { sendUsername } = React.useContext( SignUpContext );

    const textInputChange = (val) => {
        setData({
            ...data,
            username: val,
        })
    }

    const handleNextButton = (username) => {
        sendUsername(username)
        navigation.navigate('Password');
    }

    return (
        <View>
            <TextInput placeholder='Username'
            onChangeText={(val) => textInputChange(val) }></TextInput>
            <Button title='Next' onPress={() => { handleNextButton(data.username) }} />
        </View>
    )
}

export default Username;

Пароль. js (Потребитель)

import { SignUpContext } from './context';


const Password = ({ navigation }) => {

    return (
        <SignUpContext.Consumer>
            {context => (
                <View>
                    <Text>{context.username}</Text> {/* somehow display username */} 
                    <TextInput placeholder='Password'></TextInput>
                    <Button title='Submit'></Button>
                </View>
            )}
        </SignUpContext.Consumer>
    )
}

export default Password;

Answer 1

Проблема заключалась в передаче состояния И моих действий в значении. Итак, добавление моего signupState в signupContext решило эту проблему.

Итак, в регистрации. js:

const signupContext = React.useMemo(() => ({
    signupState, // adding the signup state here.
    sendUsername: (username) => {
      dispatch({ type: "USERNAME", username });
    },
  }))

И в пароле. js (потребитель), данные (имя пользователя) можно получить по:

const Password = ({ navigation }) => {
    const context = useContext(SignUpContext);
    console.log("context is ", context.signupState.username); // Fetching username here.
    const username = context.signupState.username;
    return (
        <View>
            <Text>{username}</Text>
            <TextInput placeholder='Password'></TextInput>
            <Button title='Submit'></Button>
        </View>
    )
}