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;

Mi aspettavo che la funzione useAuth vedesse Sa Pagesd () digitato dove sto sbagliando

Voglio fare la gestione del caso, ma il nome arriva nell'app js, ma non posso accedere ai bambini.

Answer 1

Il codice mostrato finora è corretto, con un'eccezione.

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

Il valore nameviene destrutturato dal ritorno di useContext. Questo va bene se il valore fornito è un oggetto, ma presumo che non lo sia.

<UserContext.Provider value={name}>

Se namenon è un oggetto, ma una stringa, la struttura non funzionerà e namelo sarà undefined.

Per risolvere questo problema hai due opzioni:

1. Non destrutturare il namevalore

const name = React.useContent(UserContext);

1. Passa un oggetto al provider

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

React usa le parentesi graffe {} per denotare un'espressione JavaScript , mentre le parentesi graffe interne sono una scorciatoia del valore della proprietà letterale dell'oggetto .