从 localStorage 设置组件中的状态
Setting the state in a component from localStorage
我正在 React 中构建一个多步骤表单,我的目标之一是在用户尚未完成填写表单时保存他们的输入。我已经使用 setItem() 将用户的输入保存在浏览器的 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
})
}
如果您不想在 componentDidMount()
中检索本地存储数据,您可以使用 constructor
功能
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 });
}
使用componentDidMount
的想法是正确的。还有一个反模式。
- 不要在组件的
constructor
之外使用 this.formData = ...
- 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>
}
}
我正在 React 中构建一个多步骤表单,我的目标之一是在用户尚未完成填写表单时保存他们的输入。我已经使用 setItem() 将用户的输入保存在浏览器的 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
})
}
如果您不想在 componentDidMount()
constructor
功能
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 });
}
使用componentDidMount
的想法是正确的。还有一个反模式。
- 不要在组件的
constructor
之外使用this.formData = ...
- 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>
}
}