我正在尝试使用 createContext、useReducer 和 useContext 在 React Native 中实现 Redux 概念。以下是我的代码文件:
Store.tsx
import React, { useReducer, createContext } from "react";
import { View, Text, StyleSheet, Button } from "react-native";
export const myContext = createContext();
export default function Store(props) {
const counter = 0;
const [state, dispatch] = useReducer((state, action) => {
return state + action;
}, counter);
return (
<myContext.Provider value={{ state, dispatch }}>
{props.children}
</myContext.Provider>
);
}
App.tsx
import React, { useState, useContext, useEffect, createContext } from "react";
import { View, Text, StyleSheet, Button } from "react-native";
import Store, { myContext } from "./components/Store";
export default function App(): JSX.Element {
const { state, dispatch } = useContext(myContext);
return (
<View style={styles.wrapper}>
<Text>HEY</Text>
<Store>
<Text>Counter: {state}</Text>
<Button title="Incr" onPress={() => dispatch(1)} />
<Button title="Decr" onPress={() => dispatch(-1)} />
</Store>
</View>
);
}
const styles = StyleSheet.create({
wrapper: {
marginTop: 100
}
});
我不确定为什么我无法访问 useContex 中的“状态”。我收到错误消息“无法读取未定义的属性‘state’” 请任何帮助。如果您也能给出一些详细的解释,那将非常有帮助。
最佳答案
您只能在上下文提供者的子组件中访问上下文的值。在这种情况下,您在 Store 中调用 useContext 来呈现 Provider。在这些情况下,将给出传递给 createContext 的默认值。在本例中,createContext()
没有给出默认值,所以它是未定义的。因此,尝试解构未定义的 const { state, dispatch } = useContext(myContext);
会导致您看到的错误。
只需添加一个额外的子组件即可使其正常工作。像这样的东西:
import React, { useState, useContext, useEffect, createContext } from "react";
import { View, Text, StyleSheet, Button } from "react-native";
import Store, { myContext } from "./components/Store";
export default function AppWrapper(): JSX.Element {
// Store, renders the provider, so the context will be accessible from App.
return (
<Store>
<App />
</Store>
)
}
function App(): JSX.Element {
const { state, dispatch } = useContext(myContext);
return (
<View style={styles.wrapper}>
<Text>HEY</Text>
<Text>Counter: {state}</Text>
<Button title="Incr" onPress={() => dispatch(1)} />
<Button title="Decr" onPress={() => dispatch(-1)} />
</View>
);
}
const styles = StyleSheet.create({
wrapper: {
marginTop: 100
}
});
关于reactjs - useContext 和 useReducer Hooks 不工作。错误 : Cannot read property 'state' of undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57130072/