React createContext 运行 突变函数无法正常工作
React createContext running mutation function not working correctly
我遇到了一个问题,我似乎无法理解为什么会这样,因为我在 codesandbox 中有相同的示例,但在我的应用程序中它显示了不同的行为。在我的应用程序中,我可以从消费者那里看到 bool 和函数的上下文,但是当我 运行 函数时,它 运行 是空函数“setUpdate: () => {}”,而不是 运行 在 UpdateDataProvider.js 文件中设置“updBool()”。任何人都知道为什么会发生这种行为。
(component.js 不是我的实际文件,只是我如何使用上下文的一个简短示例)
UpdateDataProvider.js
export const UpdateDataContext = createContext({
update: false,
setUpdate: () => {},
});
export function UpdateDataContexProvider({ children }) {
function updBool(bool) {
setU({ ...u, update: bool });
}
const [u, setU] = useState({ update: false, setUpdate: updBool });
return (
<UpdateDataContext.Provider value={u}>
{children}
</UpdateDataContext.Provider>
);
}
useUpdateData.js
import { useContext } from 'react';
import { UpdateDataContext } from '../../context/updateDataContext';
export function useUpdateDataContext() {
return useContext(UpdateDataContext);
}
component.js
import { UpdateDataContexProvider } from '../../context/updateDataContext';
import { useUpdateDataContext } from '../../hooks/exports';
useEffect(() => {
// loging the context shows me update bool and setUpdate function
console.log(context)
// Running the function will run the empty function in createContext
// in UpdateDataProvider.
context.setUpdate(true)
}, [])
export default Home = () => {
const context = useUpdateDataContext()
return (
<UpdateDataContexProvider>
<Other />
</UpdateDataContexProvider>
)
}
别介意我的问题,错误是我试图 运行 在 home 组件中使用 useEffect 中的函数,而不是在子组件中
我遇到了一个问题,我似乎无法理解为什么会这样,因为我在 codesandbox 中有相同的示例,但在我的应用程序中它显示了不同的行为。在我的应用程序中,我可以从消费者那里看到 bool 和函数的上下文,但是当我 运行 函数时,它 运行 是空函数“setUpdate: () => {}”,而不是 运行 在 UpdateDataProvider.js 文件中设置“updBool()”。任何人都知道为什么会发生这种行为。 (component.js 不是我的实际文件,只是我如何使用上下文的一个简短示例)
UpdateDataProvider.js
export const UpdateDataContext = createContext({
update: false,
setUpdate: () => {},
});
export function UpdateDataContexProvider({ children }) {
function updBool(bool) {
setU({ ...u, update: bool });
}
const [u, setU] = useState({ update: false, setUpdate: updBool });
return (
<UpdateDataContext.Provider value={u}>
{children}
</UpdateDataContext.Provider>
);
}
useUpdateData.js
import { useContext } from 'react';
import { UpdateDataContext } from '../../context/updateDataContext';
export function useUpdateDataContext() {
return useContext(UpdateDataContext);
}
component.js
import { UpdateDataContexProvider } from '../../context/updateDataContext';
import { useUpdateDataContext } from '../../hooks/exports';
useEffect(() => {
// loging the context shows me update bool and setUpdate function
console.log(context)
// Running the function will run the empty function in createContext
// in UpdateDataProvider.
context.setUpdate(true)
}, [])
export default Home = () => {
const context = useUpdateDataContext()
return (
<UpdateDataContexProvider>
<Other />
</UpdateDataContexProvider>
)
}
别介意我的问题,错误是我试图 运行 在 home 组件中使用 useEffect 中的函数,而不是在子组件中