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

これまでに示したコードは、1つの例外を除いて正しいものです。

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

値nameは、の戻り値から分解されていuseContextます。与えられた値がオブジェクトであればこれで問題ありませんが、そうではないと思います。

<UserContext.Provider value={name}>

場合はname対象ではありませんが、文字列は、その後、destructureは動作しません、とnameなりますundefined。

これを解決するには、2つのオプションがあります。

1. name値を分解しないでください

const name = React.useContent(UserContext);

1. プロバイダーにオブジェクトを渡す

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

Reactは中括弧{} を使用してJavaScript式を示しますが、内側の中括弧はオブジェクトリテラルプロパティ値の省略形です。