Настройка состояния формирует выборку данных, является ли это анти-шаблоном?

Question

Я пытаюсь выяснить, как выполнить вызов API, а затем получить временную метку для определенного места, а затем запустить часы для этого местоположения? У меня это работает, но мне просто интересно, правильно ли это? В конце концов, я собираюсь придерживаться этого в архитектуре потока. Я устанавливаю состояние из реквизита, против шаблона? Я только хочу сделать один первоначальный запрос, а затем манипулировать интервалом, поэтому я решил, что лучше использовать состояние.

Fiddle Here

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

Это абсолютно не антишаблоном. Проверьте this example в репозитории Flux Github, где компонент регистрирует обновления данных (например, ваш 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); 
    }, 

Единственное различие заключается в том, как он получает свои данные на начальном этапе, в его «конструктор»

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

Он получает свое состояние из магазина. Вы собираете данные из api в componentDidMount. Это обычная вещь, которую нужно сделать, прежде чем магазины будут задействованы. После того, как у вас есть магазин, все данные должны пройти через него. Это позволяет нескольким компонентам получать одни и те же данные без нескольких запросов. Он также инкапсулирует методы сбора, которые помогают с возможностью тестирования.

Вы говорите, что вы устанавливаете состояние из реквизита, но я не вижу этого в вашем коде.