Question

我无法在 react native 的功能组件中使用 useContext 钩子访问 createContext 传递的数据： context.js 就像

import React , {createContext,useState}  from 'react';
 export const Style1 = React.createContext();
export  default StyleContextProvider = (props) => {
const [myValue,setValue] = useState([{one: 1},{two : 2}]);
console.log("value from context : " + myValue);
    return ( 
        <Style1.Provider value={[myValue,setValue]}>
          {props.children}
        </Style1.Provider>
     );
}

和 App.js 一样

import React from 'react';
import Sidebar from './routes/sidebar';
import StyleContextProvider from './routes/context';
export default function App(props) {
  return (
        <StyleContextProvider>
          <Sidebar ></Sidebar>
        </StyleContextProvider>
  );
}

Sidebar.js 原样

import React ,{useContext } from 'react';
import {  Text, View ,Button} from 'react-native';
import Style1 from '../routes/context';
const Sidebar = () =>{
 const value =  useContext(Style1);
 console.log("value from sidebar : " + value);  // value from sidebar : undefined

return (
    <View>
      <Practice></Practice>
    </View>
)
}

练习.js

import  React  ,{useContext }from 'react';
import { Button } from 'react-native-elements';
import {View, StyleSheet,Text} from 'react-native';
import Style1 from '../routes/context';
const Practice = (props) => {
  const  Value =  useContext(Style1);
  console.log("value from practice : " + Value); // value from practice : undefined 
    return ( 
      <View >
        <Text>Value : {Value}</Text>
      </View>
     );
}
 export default Practice;

我从实践 .js 和 sidebar.js 中得到了未定义，任何有解决方案的人

Answer 1

根据您的上下文，您将值设置为 value={[myValue,setValue]}。

这意味着要访问它们，您需要使用 Destructuring assignment 如下：

const [value, setValue] = React.useContext(Style1);

另一个注意事项，由于 value 是一个对象数组，您不能直接渲染它。您需要使用 map() 进行迭代或直接访问该值。

- <Text>Value : {Value}</Text>
+ <Text>Value : {value[0].one}</Text>

以下是基于您的片段的工作示例：

const Style1 = React.createContext();
const StyleContextProvider = (props) => {
  const [myValue, setValue] = React.useState([{ one: 1 }, { two: 2 }]);
  console.log("value from context : ", myValue);
  return (
    <Style1.Provider value={[myValue, setValue]}>
      {props.children}
    </Style1.Provider>
  );
};

const View = (props) => <div>{props.children}</div>;
const Text = (props) => <span>{props.children}</span>;

const Practice = (props) => {
  const [value] = React.useContext(Style1);
  console.log("value from practice : ", value); // value from practice : undefined
  return (
    <View>
      <Text>Value : {value[0].one}</Text>
    </View>
  );
};

const Sidebar = () => {
  const [value] = React.useContext(Style1);
  console.log("value from sidebar : ", value); // value from sidebar : undefined

  return (
    <View>
      <Practice></Practice>
    </View>
  );
};

function App(props) {
  return (
    <StyleContextProvider>
      <Sidebar></Sidebar>
    </StyleContextProvider>
  );
}


ReactDOM.render(<App />, document.getElementById("react"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

<块引用>

P.S：我不知道如何使用 StackOverflow 片段小部件呈现 React Native 的东西，因此冒昧地创建了 Text 和 View 组件。

React Native useContext 返回 undefined

1 个答案: