反应本机 useContext 返回未定义

Question

我无法在 react native 的功能组件中使用 useContext hook 访问 createContext 传递的数据：context.js is as

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 中得到了 undefined ，任何有解决方案的人

Answer 1

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

这意味着为了访问它们，您需要使用解构赋值，例如：

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>

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