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;

Tôi đã mong đợi hàm useAuth để xem Sa Pagesd () được gõ tôi đang làm sai ở đâu

Mình muốn làm quản lý hồ sơ nhưng tên có trong ứng dụng js, nhưng không vào được con.

Answer 1

Mã hiển thị cho đến nay là đúng, với một ngoại lệ.

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

Giá trị nameđang bị hủy từ giá trị trả về useContext. Điều này là tốt nếu giá trị đang được cung cấp là một đối tượng, nhưng tôi cho rằng nó không phải.

<UserContext.Provider value={name}>

Nếu namekhông phải là một đối tượng, mà là một chuỗi, thì cấu trúc hủy sẽ không hoạt động và namesẽ như vậy undefined.

Để giải quyết vấn đề này, bạn có hai lựa chọn:

1. Đừng phá hủy namegiá trị

const name = React.useContent(UserContext);

1. Chuyển cho nhà cung cấp một đối tượng

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

React sử dụng dấu ngoặc nhọn {} để biểu thị một biểu thức JavaScript , trong khi dấu ngoặc nhọn bên trong là viết tắt giá trị thuộc tính theo nghĩa đen của đối tượng .