我正在 React 中構建一個多步驟表單，我的目標之一是在用戶尚未完成填寫表單時保存用戶的輸入。我已經使用 setItem() 將用戶的輸入保存在瀏覽器的 localStorage 中。
輸入欄位設定本地狀態，然后將其保存到 localStorage。
但是，當頁面重繪 時，我想從 localStorage 檢索資料并從那里設定狀態變數，以便使用保存的資料預先填充輸入欄位（如果有意義的話）
我在 componentDidMount() 中使用 setState() 來執行此操作，盡管我認為這是在創建反模式，但我并不完全確定那是什么。當我使用 UNSAFE_componentWillMount 時它作業正常，但我不想使用已棄用的生命周期方法。
這是我的代碼：
componentDidMount() {
this.formData = JSON.parse(localStorage.getItem('form'));
this.setState({
type: this.formData.type,
subtype: this.formData.subtype,
brand: this.formData.brand
})
}
uj5u.com熱心網友回復：
constructor如果您不想檢索本地存盤資料，可以使用函式componentDidMount()
constructor(){
const formData = JSON.parse(localStorage.getItem('form'));
const { type, subtype, brand } = formdata;
this.setState({ type, subtype, brand });
}
雖然我建議使用 didMount。
componentDidMount() {
const formData = JSON.parse(localStorage.getItem('form'));
const { type, subtype, brand } = formdata;
this.setState({ type, subtype, brand });
}
uj5u.com熱心網友回復：
使用的想法componentDidMount是正確的。還有另一種反模式。
- 不要
this.formData = ...在組件之外使用constructor- https://reactjs.org/docs/react-component.html
整個作業示例看起來像這樣。我在 setState 之后添加了回呼，以顯示加載和保存到 localStorage 確實有效。
export default class Hello extends React.Component {
state = {
type: undefined,
subtype: undefined,
brand: 0,
}
componentDidMount() {
const formData = JSON.parse(localStorage.getItem('form')) ?? {};
if (formData) {
formData.brand = 5
this.setState({
type: formData.type,
subtype: formData.subtype,
brand: formData.brand,
}, () => {
console.log('newState', this.state)
localStorage.setItem('form', JSON.stringify(this.state))
})
}
}
render() {
return <h1>Hello {this.state.brand} </h1>
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/409812.html
標籤：
上一篇：大型表單上的雙向資料系結