英文:
how useContext hook is working here with useState hook
问题
import { createContext, useState } from "react";
// 这里是实际保存 useContext 数据的地方 `currentUser` 和 `setCurrentUser`
export const UserContext = createContext({
currentUser: null,
setCurrentUser: () => null,
});
// 但是这里有一个 `userProvider`，使用了 `useState` Hook。这里的 `useState` Hook 的作用是什么？
// `Value` 如何在 `useState` Hook 中添加数据，如果有的话？
export const UserProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);
const value = { currentUser, setCurrentUser };
return (
<UserContext.Provider value={value}> {children} </UserContext.Provider>
);
};
// 请告诉我它如何在其他网页中使用来收集数据，我已经尝试理解了一个星期，但仍然感到困惑。
希望这有助于你理解这段代码的功能和用法。
英文:
import { createContext, useState } from "react";
this is the place where the actual useContext data is going to be saved currentUser and setCurrentUser
export const UserContext = createContext({
currentUser: null,
seCurrentUser: () => null,
});
but here is userProvider with useState Hook and what is
the function of this useState Hook here and how Value is adding data in useState hook, if it is?
export const UserProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);
const value = { currentUser, setCurrentUser };
return (
<UserContext.Provider value={value}> {children} </UserContext.Provider>
);
};
please tell me how it's going to be used in other web pages to collect data it's really confusing for me i'm trying to understand since last week.
答案1
得分: 2
这里是实际存储useContext数据的地方，currentUser和setCurrentUser。
导出的代码如下：
export const UserContext = createContext({
currentUser: null,
setCurrentUser: () => null,
});
实际上，这只是默认值。你不会在这里存储数据，如果一个组件获取到了这些值，意味着你忘记渲染<UserContext.Provider>。
这里才是真正的工作发生的地方。你的组件有一个状态，它的行为就像React中的任何其他状态一样。唯一不同的是，你将当前用户和setCurrentUser函数通过上下文提供，这样树中更深的组件可以使用并更改状态。
上下文只是一种将值从组件A传递到组件B的方式。你仍然需要实际实现状态或其他代码来完成你想要的功能。
以下是如何使用上下文的示例：
const SomeComponent = () => {
const { currentUser, setCurrentUser } = useContext(UserContext);
// currentUser是在UserProvider中找到的状态，setCurrentUser
// 是状态设置函数，也来自UserProvider
}
英文:
> this is the place where the actual useContext data is going to be saved currentUser and setCurrentUser
>
> export const UserContext = createContext({
> currentUser: null,
> seCurrentUser: () => null,
> });
>
Actually, this is just the default value. You will not be storing data here, and if a component ever gets these values it means you have forgotten to render a <UserContext.Provider>.
const [currentUser, setCurrentUser] = useState(null);
const value = { currentUser, setCurrentUser };
return (
<UserContext.Provider value={value}> {children} </UserContext.Provider>
);
This is where the work really happens. Your component has a state, which behaves just like any other state in react. The only thing different is that you are then making the current user and the setCurrentUser function available via context, so components farther down the tree can use and change the state.
Context is just a way to pass a value Component A to Component B. You still need to actually implement state or other code to do what you want.
Here's how it looks to consume the context:
const SomeComponent = () => {
const { currentUser, setCurrentUser } = useContext(UserContext);
// currentUser is the state found in UserProvider, and setCurrentUser
// is the state setter function, also from UserProvider
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论