使用useEffect清理函数将表单值存储在localStorage中

我正在使用useEffect清理函数将formik值存储在localStorage中。奇怪的是，存储的值是过时的初始值，而不是当前的表单值。这是代码：

console.log(values)
React.useEffect(() => {
// do stuff
return function() {
console.log(values)
// store form data on unmount
localStorage.setItem("formValues", JSON.stringify(values))
};
}, []);

在useEffect函数外记录的值是当前值，在cleanup函数内记录(并存储(的值是过时的初始值。我认为函数将被延迟求值，因此values变量将具有当前值。在黑暗中，我还尝试对表单值使用getter函数。但仍然是陈旧的价值观。这里发生了什么？

如果您只想在组件卸载时进行清理，这就是您想要的：

const valuesRef = useRef(values);
useEffect(() => {
valuesRef.current = values;
}, [values]);
useEffect(() => {
// do stuff
return function() {
console.log(valuesRef.current)
// store form data on unmount
localStorage.setItem("formValues", JSON.stringify(valuesRef.current))
};
}, []);

如果您只想在组件卸载时清理和更新本地存储，则应该将空数组([](传递给useEffect。如果传递一个空数组([](，则效果中的道具和状态将始终具有其初始值(https://reactjs.org/docs/hooks-effect.html)。因为每个效果都"属于"一个特定的渲染，所以在这种情况下，它是组件安装时的第一个渲染。但是，在每次值更改时更新localstorage可能会更好，在这种情况下，您只需要将[values]传递给useEffect。

有两种方法可以解决这个问题。

在useEffect的[]内传递值

React.useEffect(() => {
// do stuff
return function() {
console.log(values)
// store form data on unmount
localStorage.setItem("formValues", JSON.stringify(values))
};
}, [values]);

但通过这种方式，它将在每次值更改时保存因此，如果在组件卸载时只保存一次，则这是不合适的

第二种方法(useRef(

const formikRef = React.useRef();
formikRef.current = useFormik({
initialValues: ...,
onSubmit: ...,
validationSchema: ...
});
React.useEffect(() => {
// do stuff
return () => {
console.log(formikRef.current.values);
// store form data on unmount
localStorage.setItem(
"formValues",
JSON.stringify(formikRef.current.values)
);
};
}, []);
const formik = formikRef.current;

相关内容

最新更新

热门标签：