反应本机 useContext returns 未定义

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>
)
}

Practice.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]}。

这意味着要访问它们，您需要使用 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: I do not know how to render React Native stuff using the Whosebug snippet widget, hence took the liberty to create Text and View components.

反应本机 useContext returns 未定义

React native useContext returns undefined

reactjs

react-native

react-context

react-hooks