Question

我有两个部分：父级和子级。我想在屏幕上看到localStorage.getItem("myEl")的实际值。父状态为storage:localStorage.getItem("myEl")。我在儿童组件的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

组件应收到状态或道具以重新呈现自己，在您的情况下，则不接收任何状态或道具。您不应该更新localStorage并期望组件将使用本地存储中的新值重新呈现，您可以为按钮编写一个处理程序，以便将增加的值保存到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中进行设置，当用户关闭选项卡并在未清除本地存储数据后打开我们的网站时，该组件将从那里获取值。

Answer 2

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应用程序的任何位置为您提供全局存储。

处于组件状态的LocalStorage

2 个答案: