javascript - 当全局变量改变时更新 react 组件状态

Question

我有一个经常变化的全局变量。假设它存储在 window.something 中。在 React 中，我需要将此更改反射(reflect)在组件及其状态中。

示例代码:

class Example extends React.Component {

  constructor(props) {
        super(props);
        this.state = { something: '1'}
    }


  render() {
     return (
      <div>
      <input value={window.something}
             onChange={event => {this.setState({'something': event.target.value})}} 
      />
      </div>
    )
  }
}

但是，该值仅在第一次设置时才设置，并且随着变量的更新而没有变化。

Answer 1

这不会由存储对象的更改触发。如果您有权访问触发更改的流程，则让它调用状态更新。如果您没有访问权限，也许您可​​以经常轮询更改。

就个人而言，我只是从我需要它的页面上的存储中获取它，或者将它添加到状态并在 session 的其余部分使用它。

componentWillMount = () => {
    const foo = JSON.parse(sessionStorage.getItem('foo'));
    const bar = JSON.parse(sessionStorage.getItem('bar'));

    if (!isEmpty(foo) && !isEmpty(bar)) {
        this.props.setFoo(foo);
        this.props.setBar(bar);
    } 
}

Here是解释如何在浏览器的本地存储上设置事件监听器的链接。