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;

useAuth 함수가 내가 잘못하고있는 곳에 Sa Pagesd ()를 입력 할 것으로 예상했습니다.

케이스 관리를하고 싶은데 js 앱에 이름이 들어 왔는데 아이들에 접근 할 수 없어요.

Answer 1

지금까지 표시된 코드는 한 가지를 제외하고 정확합니다.

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

값 name은의 반환에서 구조화되고 useContext있습니다. 주어진 값이 객체이면 괜찮지 만 그렇지 않다고 생각합니다.

<UserContext.Provider value={name}>

경우 name객체가 아니라 문자열은 다음 destructure이 작동하지 않습니다, 그리고 name될 것입니다 undefined.

이를 해결하려면 두 가지 옵션이 있습니다.

1. name가치를 해체하지 마십시오

const name = React.useContent(UserContext);

1. 공급자에게 개체 전달

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

React는 중괄호 {} 를 사용하여 JavaScript 표현식을 나타내는 반면 내부 중괄호는 객체 리터럴 속성 값 속기 입니다.