当初始值发生变化时，Formik创建无限呈现。

Question

我正在使用formik在react项目。该表单具有名称输入，如果可用，则从本地存储中获取初始值。在更改名字输入时，我在本地存储中更改它的值。

const prefilledValues = JSON.parse( window.localStorage.getItem("pre-signup-form"));`

useEffect(() =>
 { window.localStorage.setItem( "pre-signup-form", 
   JSON.stringify({ ...prefilledValues, ...formik.values }) ); 
}, [formik.values, prefilledValues]);

我使用useFormik来设置初始值。当我更改名字输入(它基本上改变了本地存储中的值以及初始值)时，它会导致太多的呈现，页面会变得没有响应。

示例：https://codesandbox.io/s/youthful-saha-63bp8t?file=/src/App.js

Answer 1

更好的方法是使用localStorage分离逻辑，将其移动到自定义钩子。检查这里的方法，https://codesandbox.io/s/local-storage-d5m1zx?file=/src/App.js

我用LC将逻辑转移到useLocalStorage钩子。现在，更改名称并不会导致无限呈现。