reactjs - 使用 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 函数外记录的值是当前值，在清理函数内记录(和存储)的值是陈旧的初始值。我虽然会延迟计算该函数，因此 values 变量将具有当前值。作为一次摸索，我还尝试对表单值使用 getter 函数。但仍然是陈旧的值(value)观。这里发生了什么？

Answer 1

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

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。 如果你传递一个空数组([])，效果中的 Prop 和状态将始终具有它们的初始值(https://reactjs.org/docs/hooks-effect.html)。这是因为每个效果都“属于”一个特定的渲染，在这种情况下它是组件安装时的第一个渲染。 但最好在每次值更改时更新 localstorage，在这种情况下，您只需将 [values] 传递给 useEffect。