React :如何填充保存在本地存储中的数据？

React中可以使用本地存储来保存数据，并在组件重新加载时填充数据。常见的本地存储方式包括localStorage和sessionStorage。

要填充保存在localStorage中的数据，可以按照以下步骤进行：

在组件的constructor中，使用localStorage.getItem(key)方法获取保存在localStorage中的数据。key是要获取的数据的键名。
将获取的数据保存在组件的state中，可以使用this.setState({ data: localStorageData })来更新组件的state。
在组件渲染时，使用state中的数据填充相应的表单字段或展示组件。
当用户进行修改或保存操作时，更新组件state中的数据，并使用localStorage.setItem(key, value)方法将更新后的数据保存回localStorage中。

下面是一个示例代码：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    
    // 从localStorage中获取保存的数据
    const localStorageData = localStorage.getItem('myData');

    this.state = {
      data: localStorageData ? JSON.parse(localStorageData) : ''
    };
  }

  componentDidMount() {
    // 填充数据到表单字段或展示组件
    // 例如：将数据填充到input字段中
    document.getElementById('myInput').value = this.state.data;
  }

  handleChange = (event) => {
    // 更新state中的数据
    this.setState({ data: event.target.value });
  }

  handleSave = () => {
    // 将更新后的数据保存回localStorage中
    localStorage.setItem('myData', JSON.stringify(this.state.data));
  }

  render() {
    return (
      <div>
        <input id="myInput" onChange={this.handleChange} />
        <button onClick={this.handleSave}>保存</button>
      </div>
    );
  }
}

export default MyComponent;

这是一个简单的React组件，通过localStorage来保存并填充数据。当组件加载时，会从localStorage中获取数据并填充到表单字段中。当用户修改数据并点击保存按钮时，会将更新后的数据保存回localStorage中。