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

Question

我正在使用 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 函数。但仍然是陈旧的价值观。这里发生了什么？

Answer 1

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

在 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;

Answer 2

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

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 清理函数将表单值存储在 localStorage 中

Using useEffect cleanup function to store form values in localStorage

reactjs

formik