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;

Saya mengharapkan fungsi useAuth untuk melihat Sa Pagesd () mengetik di mana saya melakukan kesalahan

Saya ingin melakukan manajemen kasus, tetapi namanya ada di app js, tetapi saya tidak dapat mengakses anak-anak.

Answer 1

Kode yang ditampilkan sejauh ini benar, dengan satu pengecualian.

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

Nilai namesedang dirusak sejak kembalinya useContext. Ini baik-baik saja jika nilai yang diberikan adalah sebuah objek, tetapi saya berasumsi bukan.

<UserContext.Provider value={name}>

Jika namebukan sebuah objek, tapi sebuah string, maka destructure tidak akan bekerja, dan nameakan berhasil undefined.

Untuk mengatasi ini, Anda memiliki dua opsi:

1. Jangan merusak namenilainya

const name = React.useContent(UserContext);

1. Berikan objek kepada penyedia

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

React menggunakan kurung kurawal {} untuk menunjukkan ekspresi JavaScript , sedangkan kurung kurawal dalam adalah singkatan dari nilai properti literal objek .