从 localStorage 设置组件中的状态

Question

我正在 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
    })
  }

Answer 1

如果您不想在 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 });
}

Answer 2

使用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>
  }
}

从 localStorage 设置组件中的状态

Setting the state in a component from localStorage

reactjs

local-storage

react-lifecycle