setState не будет обновлять React clock - PullRequest
Новая
       10

setState не будет обновлять React clock

0 голосов
/ 04 февраля 2020

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

По сути, приложение позволяет пользователю вводить имя любого города в мире, а вывод обновляет компонент часов реального времени React, который находится под входом. Для этого я использую библиотеку часовых поясов города, чтобы получить данные для нужного города пользователя, момент. js, чтобы проанализировать время города в желаемом часовом поясе и, конечно, часы реального времени React для отображения фактического времени на пользователь.

Внутри моей функции loadTime я извлек свойство часового пояса и передал его в мой метод moment().tz() для анализа. После того, как я передаю state в свой setState() и печатаю обновленное состояние на консоль, оно действительно отображает правильное состояние. Например, пользователь вводит Токио и возвращается ключ / значение timezone: "Asia/Tokyo".

Моя проблема в том, что после передачи this.state.timezone в мой атрибут React Live Clock timezone и нажатия кнопки «Получить время» мои часы фактически не обновляют состояние и вместо этого остаются текущим временем браузер пользователя.

Я установил, что моя функция loadTime() работает так, как она должна, поэтому я уверен, что мой компонент Clock не подключен правильно для чтения обновленного состояния timezone , Другая возможность, как указано в моем вопросе, заключается в том, что я неправильно использую setState().

Есть ли что-то, что я здесь пропускаю, или я на правильном пути с неправильным использованием setState()? 


import Moment from 'moment-timezone';
import cityTimezones from 'city-timezones';
import Clock from 'react-live-clock';
let moment = require('moment-timezone');

export default class Search extends Component {

  state = {
    userLocation: "",
    localTime: "",
    rows: [],

  };

  //Methods
  loadTime = (searchTerm) => {
    const city = cityTimezones.lookupViaCity(searchTerm);
    let state = this.state; 
    if (city.length > 0) { 
      const timezone = city[0].timezone;    
      let now = moment().tz(timezone).format('h:mm:ss a');           
      state.localTime = now;         
      state.timezone = timezone;   
    } else {
      state.userLocation = "";
      state.localTime = "";
    };
    this.setState(state);  
    console.log(state);      
  };

    handleChange = (e) => {
      let state = this.state;
      state[e.target.name] = e.target.value;
      this.setState(state);   
    }

    //Create
    handleClick = (e) => {
      e.preventDefault();
      this.loadTime(this.state.userLocation);
    };

    render () {
      let alert = (!this.state.localTime) ? "Please enter location": "";

      return (
        <div className="search-container-fluid gradient p-3">
          <div className="row">
            <div className="search-container">
                <input onChange={this.handleChange} name="userLocation" type="text" 
                 className="form-control" placeholder="Enter a location" />
                <button onClick={this.handleClick} name="search-btn" className="btn btn-search" 
                 type="button" >Get time.</button>
              <div className="output-container mt-5">
                <Clock ticking={true} format={'hh:mm:ss a'} timezone={this.state.timezone} />                             
                {/* {alert} */}
              </div>
            </div>
          </div>
        </div>
      )
    }
  };```

1 Ответ

0 голосов
/ 04 февраля 2020

Здесь вы непосредственно манипулируете состоянием, поскольку реакция не может определить изменение, попробуйте следующий код 

 //Methods


loadTime = (searchTerm) => {
    const city = cityTimezones.lookupViaCity(searchTerm);
    let state = {...this.state}; 
    if (city.length > 0) { 
      const timezone = city[0].timezone;    
      let now = moment().tz(timezone).format('h:mm:ss a');           
      state.localTime = now;         
      state.timezone = timezone;   
    } else {
      state.userLocation = "";
      state.localTime = "";
    };
    this.setState(state);  
    console.log(state);      
  };

handleChange = (e) => {
  let state = {...this.state};
  state[e.target.name] = e.target.value;
  this.setState(state);   
}
...