全局變量更改時更新反應組件狀態

Question

我有一個經常更改的全局變量。 假設它存儲在window.something 。 在反應中，我需要將此更改反映到組件及其狀態中。

示例代碼：

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

更改存儲對象不會觸發此操作。 如果您有權訪問觸發更改的過程，請讓它調用狀態更新。 如果您沒有訪問權限，也許您可​​以經常輪詢更改。

就個人而言，我只是從需要它的頁面上的存儲中獲取它，或者將其添加到狀態中並在其余的會話中使用它。

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);
    } 
}

這是一個鏈接，說明如何在瀏覽器的localStorage上設置事件偵聽器。

Answer 2

像這樣嗎

window.something='1234';

  class Example extends React.Component {

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

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

Answer 3

您的情況有2種方法：

1. 每當全局變量更改時，請重新渲染Example組件。 這是一項昂貴的操作。
2. 示例組件應偵聽window.something中的更改。 為此，應該有一些魔術，當window.something更改時，它會更新您的Example組件狀態。 然后，該組件將順利更新。

我建議第二種方法，並使用像Redux這樣的存儲系統來實現這種魔力。