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变量将具有当前值。在黑暗中拍摄时，我还尝试将吸气功能用于表格值。但是仍然是旧的过时的价值观。这是怎么回事？

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))
    };
}, []);

由于只需要清理并在卸载组件时更新localstorage，因此应将空数组（[]）传递给useEffect。如果传递一个空数组（[]），则效果内的道具和状态将始终具有其初始值（https://reactjs.org/docs/hooks-effect.html）。这是因为每个效果都“属于”特定的渲染，在这种情况下，它是安装组件时的第一个渲染。但是，最好在每个值更改时更新localstorage，在这种情况下，您只需要将[values]传递给useEffect。

使用useEffect清理功能将表单值存储在localStorage中

2 个答案: