时间戳

首页 > 解决方案 > React Native 使用上下文

javascript - React Native 使用上下文

问题描述

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，但我无法访问孩子。

标签： javascriptreactjsreact-native

解决方案

到目前为止显示的代码是正确的，但有一个例外。

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 表达式，而内部花括号是对象文字属性值的简写。

推荐阅读