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это не объект, а строка, то деструктура работать не будет, и nameбудет undefined.

Чтобы решить эту проблему, у вас есть два варианта:

1. Не разрушайте nameценность

const name = React.useContent(UserContext);

1. Передайте провайдеру объект

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

React использует фигурные скобки {} для обозначения выражения JavaScript , тогда как внутренние фигурные скобки являются сокращением значения свойства литерала объекта .