组件状态中的 LocalStorage

Question

我有两个组件父和子。我想在我的屏幕上看到localStorage.getItem("myEl") 的实际值。父状态为storage:localStorage.getItem("myEl")。我在 Children 组件中更改 localeStorage 中的“myEl”。不幸的是，父组件在“myEl”更改后不会重新渲染，但在我执行某些操作（例如再次更改状态）后它会起作用。我知道问题是 setState 是 asinc 但我不知道如何解决这个问题。

例如，

家长：

class Parent extends React.Component {

    constructor() {
        super();
        this.state = {storage:localStorage.getItem("myEl")};
    }

    render(){
        return <div>
                   <Child/>
                   <p>{this.state.storage}</p>
               </div>
    }
}

孩子：

let i=0;
class Child extends React.Component {

render() {
    return (
            <button onClick={() => {
                localStorage.setItem("myEl",i);
                i++;
            }}>click me</button>
    );
}
}

Answer 1

react 没有监听 localStorage 中的更改，这就是为什么父组件不知道子组件何时更改 localStorage 中的值。 要解决此问题，您必须以这种方式从父组件中路径您的子组件 onClick 函数：

class Parent extends React.Component {

    constructor() {
        super();
        this.state = {storage:localStorage.getItem("myEl")};
    }

    handleChildClick = (count) => {
      localStorage.setItem("myEl", count);
      this.setState({ storage:localStorage.getItem("myEl") });
    }

    render(){
        return <div>
                   <Child onClick={this.handleClick} />
                   <p>{this.state.storage}</p>
               </div>
    }
}

let i=0;
class Child extends React.Component {

render() {
    return (
            <button onClick={() => {
                this.props.onClick(i);
                i++;
            }}>click me</button>
    );
}
}

如果您在其他组件中需要此值，请考虑将 redux 与 react-redux 容器一起使用，以便在 react 应用的任何位置为您提供全局存储。

Answer 2

组件应该接收状态或道具以重新呈现自己，在您的情况下，它不会收到任何一个。您不应该更新 localStorage 并期望您的组件将使用本地存储中的新值重新渲染，您可以为您的按钮编写一个处理程序，以便将增加的值保存到您的本地存储中。如下：

class App extends React.Component {

  constructor() {
    super()
    this.state = { _val: 0 }
  }

  componentDidMount = () => {
    const valFromLocalStorage = localStorage.getItem("myEl") || this.state._val
    this.setState({ _val: valFromLocalStorage })
  }

  handleINC = e => {
    const _valFromState = this.state._val
    const _val = _valFromState++
    localStorage.setItem("myEl", _val)
  }

  render() {
    return(
      <div>
       <button onClick={this.handleINC}>increment value!</button>
      </div>
    )
  }  
}

顺便说一句，在componentDidMount 中，您从 localStorage 获取值，或者如果它是虚假的，您从您的状态获取默认值。然后在按钮处理函数中，您从状态中获取值并将其递增并将其设置在您的 localStorage 中，以防将来出现组件用例，当用户关闭选项卡并在一段时间后打开我们的网站时，本地存储数据未被清除，然后该组件将从那里获取值。