刷新页面后，如何使next-js中表单的输入字段中的数据保持不变

Question

我正在nextjs中处理一个表单，我希望数据保持不变，即在刷新或重新加载整个页面后保持不变。本地存储不适用于next js，所以我正在寻找一个替代方案，当我使用它时，我总是得到未定义的本地存储这是我在下面的代码

import React, { useState, useEffect, useLayoutEffect, createContext , useContext } from "react";
import { useRouter } from "next/router";
import Cookie from "js-cookie";
import { parseCookies } from "../helpers/index";
import { Formik } from "formik";
function Form() {
return (
<div>
<form action="" >
<section class="left">
<div class="input-container">
<label for="name">Full name</label>
<input type="text"/>
</div>
<div class="input-container">
<label for="age" required>
Mobile Number
</label>
<input type="text"/>
</div>
<div class="input-container">
<label for="phone">Choose password</label>
<input type="text"/>
</div>
</div>
</section>
</form>
</div>
);
}
export default Form;

Answer 1

不可能使用formik，为了让数据在刷新后保持不变，您需要将其保存到localStorage(或cookie(。

这适用于NextJS(您需要首先测试window(

示例如下

const App = () => {
const [ value, setValue ] = useState({
name: '',
mobile: '' 
});
useEffect(() => {
//you need to call this for nextjs, so this is performed only on client side.
if (typeof window !== 'undefined') {
let storedValue = localStorage.getItem('value');
if (storedValue) {
storedValue = JSON.parse(storedValue) || {}
// we explicitly get name and mobile value in case localStorage was manually modified.
const name = storedValue.name || ''
const mobile = storedValue.mobile || ''
setValue({ name, mobile }) //restore value from localStorage
}

}

},[]) 
// alternatively a betterway to handle side effect is useEffect
// useEffect(() => {
//   localStorage.setItem('value', JSON.stringify(value))
// },[value])

const onChange = (e) => {
const name = e.target.name

const newValue = { ...value, [name]: e.target.value }
setValue(newValue);
localStorage.setItem('value', JSON.stringify(newValue)) //save input to localstorage
}
return (<div>
<input name="name" value={value.name} onChange={onChange} />
<input name="mobile" value={value.mobile} onChange={onChange} />
</div>
) 

}

}