[英]Do functions get the latest state value in React?
I have a function inside of my functional component that uses a value saved in state.我的功能组件中有一个函数,它使用状态中保存的值。 However, when it is called, it has the original value in state, not the updated value.
但是,当它被调用时,它的状态是原始值,而不是更新后的值。 When I look at my component in Chrome React Dev Tools, I see that the updated value is stored in state.
当我在 Chrome React Dev Tools 中查看我的组件时,我看到更新后的值存储在 state 中。 Aren't functions supposed to get the latest state value in React?
函数不是应该在 React 中获取最新的状态值吗? I didn't think I'd have to wrap my functions in a useEffect every time some value in state they depend on changes.
我认为我不必每次都将我的函数包装在 useEffect 中,它们的状态取决于它们的变化。 Why is this happening?
为什么会这样?
const Editor = (props) => {
const [template, setTemplate] = useState(null);
const [openDialog, setOpenDialog] = useState(false);
useEffect(() => {
if (props.templateId) {
getTemplate(props.templateId));
}
},[]);
const getTemplate = (templateId) => {
{...make API to get template...}
.then((response) => {
if (response.template) setTemplate(response.template);
});
}
/* THIS FUNCTION SAYS TEMPLATE IS ALWAYS NULL */
const sendClick = async () => {
if (template) {
await updateTemplate();
} else {
await initializeTemplate();
}
setOpenDialog(true);
};
}
UPDATE: I figured out the issue.更新:我想出了这个问题。 The sendClick function is being used inside an object that I have in state.
sendClick 函数正在我处于状态的对象内使用。 When that object is created, it creates a version of the sendClick function based on the state at that time.
创建该对象时,它会根据当时的状态创建一个版本的 sendClick 函数。 I realized I needed to refactor my code so that the function is not stored within my object in state so that the function will always have the latest state values.
我意识到我需要重构我的代码,以便函数不会以状态存储在我的对象中,这样函数将始终具有最新的状态值。
Please correct the code there its setTemplate(template));
请更正那里的代码,它的
setTemplate(template));
not getTemplate(template));
不是
getTemplate(template));
I'm guessing that you have that right in the source code... if Yes then,我猜你在源代码中有那个权利......如果是,那么,
You have got into a trap that all developers new to React fall into.你陷入了一个陷阱,所有 React 新手都会陷入这个陷阱。
This code is betraying you ...这段代码背叛了你......
useEffect(() => {
if (props.template) {
setTemplate(template)); // Mentioned as getTemplate(template));
}
},[]); // Here is where you make the mistake
The second argument you pass to the useEffect
is called as Dependencies .您传递给
useEffect
的第二个参数称为Dependencies 。 Meaning if your useEffect
is dependent on any state or any variable or function, Ii should be pass as the second argument inside the []
.这意味着如果您的
useEffect
依赖于任何状态或任何变量或函数,则 Ii 应作为[]
的第二个参数传递。 By now you should have got the answer.现在你应该已经知道答案了。
Clearly, your useEffect
is dependent on template
.显然,您的
useEffect
依赖于template
。 You should pass that inside the []
.您应该将其传递到
[]
。
So the code will be : -所以代码将是: -
useEffect(() => {
if (props.template) {
setTemplate(template)); // Mentioned as getTemplate(template));
}
},[template]);
Now React will automatically run the function every time the value of template
changes therefore, updates template
.现在 React 会在每次
template
的值改变时自动运行该函数,因此更新template
。
For more information about useEffect
...有关
useEffect
更多信息...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.