我想获取表单中输入的信息并在某处使用它，但是刷新页面时状态会重置。（反应）

Question

我有一个 formData 状态。表单中的信息在提交时出现在这里。我想在某个地方显示这些信息，但是当页面刷新或者切换到另一个页面时，这个状态就丢失了。我怎样才能永久保留这些信息？

Step1.js

export default function Step1({ formData, setFormData })
 {
  ....
  return (
 <TextField fullWidth id="outlined-basic" label="Address Title" variant="outlined" size="small"
  onChange={(e) => {  setFormData({ ...formData, AddressTitle: e.target.value }); }} 
  value={formData.AddressTitle}
 /> )
}

Main.js

export default function Main() 
{
  const [formData, setFormData] = useState({});

   const PageDisplay = () => {
    if (page === 0) {
      return <Step1 formData={formData} setFormData={setFormData} />;
    } 
   }

   return ( 
   <Button size="small" variant="contained" color="success"
              onClick={(e) => {
                if (page === FormTitles.length - 1) {
                  alert("ADDRESS SUBMITTED"); console.log(formData);
                } else {
                  setPage((currPage) => currPage + 1);
                }
              }}
  >
 {page === FormTitles.length - 1 ? "Submit" : "Next"}
 </Button>
   )
}

如何保留formdata的内容才不会丢失？

Answer 1

您可以使用本地存储。

用于设置本地存储

window.localStorage.setItem('formData', formData);

用于从本地存储中获取项目

window.localStorage.getItem('formData')

我想获取表单中输入的信息并在某处使用它，但是刷新页面时状态会重置。（反应）

I want to take the information entered in the form and use it somewhere, but state resets when the page is refreshed. ( react)

reactjs

react-redux

react-hooks

use-state

我想获取表单中输入的信息并在某处使用它，但是刷新页面时状态会重置。 （反应）

I want to take the information entered in the form and use it somewhere, but state resets when the page is refreshed. ( react)

reactjs

react-redux

react-hooks

use-state

我想获取表单中输入的信息并在某处使用它，但是刷新页面时状态会重置。（反应）