Question

我正在尝试解决如何进行API调用，然后获取特定位置的时间戳，然后为该位置启动时钟？我有它的工作，但我只是想知道这是否正确？我最终会在通量架构中坚持这一点。我从道具，反模式设置状态？我只想做一个初始请求然后操纵间隔，所以我认为最好使用状态。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      time: 0
    };
  }

  componentDidMount() {
    const URL = 'http://api.timezonedb.com/?lat=37.773972&lng=-122.431297&format=json&&key=XXXXXXXXXXX';
    const _this = this;
    fetch(URL)
      .then(function(response) {
        return response.json();
      }).then(function(data) {
        console.log(data);
        _this.setState({
          time: data.timestamp
        });
      }).catch(function() {
       reject(err);
      });
      this.interval = setInterval(this.tick.bind(this), 1000);
  }
  tick() {
    this.setState({
      time: this.state.time + 1
    });
  }
  componentWillUnmount() {
    clearInterval(this.interval);
  }
  render() {
     return (
        <div>
            <p>Time on West Coast:</p> {moment.unix(this.state.time).format('YYYY-MM-DD HH:mm:ss')}
        </div>

     );
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('container')
);

Answer 1

这绝对不是反模式。查看Flux Github存储库中的this example，其中组件在setInterval方法中注册数据更新（例如componentDidMount）。

  componentDidMount: function() {
    this._scrollToBottom();
    MessageStore.addChangeListener(this._onChange);
    ThreadStore.addChangeListener(this._onChange);
  },

然后，就像你一样，它会在componentWillUnmount中取消注册。

  componentWillUnmount: function() {
    MessageStore.removeChangeListener(this._onChange);
    ThreadStore.removeChangeListener(this._onChange);
  },

唯一的区别在于它最初如何获取数据，在其构造函数＆＃34;

getInitialState: function() {
    return getStateFromStores();
  },

它从商店获得了它的状态。您正在componentDidMount中从api收集数据。在商店参与之前，这是常见的事情。一旦你有了商店，所有数据访问都应该通过它。这允许多个组件在没有多个请求的情况下获得相同的数据。它还封装了收集方法，这有助于提高可测试性。

你说你是从道具设置状态，但我不会在你的代码中看到这一点。

设置状态形成数据提取，这是一个反模式吗？

1 个答案: