React Native useContex

Question

import React from 'react';

export function useAuth() {
  const [name, setName] = React.useState('Sa');

  return {name, setName};
}

import {createContext} from 'react';

export const UserContext = createContext();

import React from 'react';
import {useAuth} from './userHook';
import {UserContext} from './userContext';
import Pagesd from './pagesd';

export default function () {
  const {name} = useAuth();
  return (
    <UserContext.Provider value={name}>
      <Pagesd />
    </UserContext.Provider>
  );
}

import React from 'react';
import {View, Text} from 'react-native';
import {UserContext} from './userContext';

function Pagesd() {
  const {name} = React.useContext(UserContext);
  return (
    <View>
      <Text>{name}</Text>
    </View>
  );
}
export default Pagesd;

Je m'attendais à ce que la fonction useAuth voie Sa Pagesd () tapée là où je me trompe

Je veux faire la gestion de cas, mais le nom vient dans l'application js, mais je ne peux pas accéder aux enfants.

Answer 1

Le code affiché jusqu'à présent est correct, à une exception près.

const {name} = React.useContext(UserContext);

La valeur nameest déstructurée à partir du retour de useContext. C'est bien si la valeur donnée est un objet, mais je suppose que ce n'est pas le cas.

<UserContext.Provider value={name}>

Si ce namen'est pas un objet, mais une chaîne, alors la déstructure ne fonctionnera pas et le namesera undefined.

Pour résoudre ce problème, vous avez deux options:

1. Ne pas déstructurer la namevaleur

const name = React.useContent(UserContext);

1. Passer un objet au fournisseur

<UserContext.Provider value={{name}}>

React utilise des accolades {} pour désigner une expression JavaScript , tandis que les accolades internes sont un raccourci de valeur de propriété littérale d'objet .