React Hooks useState обновляет массив

Question

Я хочу получить данные из электронных таблиц Google, но у меня возникла проблема с перехватчиками React useState.

У меня есть список местоположений и список URL. пример для местоположения 1: URL 1 и местоположения 2: URL 2.

первый рендер:

Я получаю по умолчанию местоположение 1 и данные, полученные из URL 1.

console.log(getTimes) & console.log(times) возвращает данные для местоположения 1 из URL 1.

щелкните местоположение 5:

Я получаю данные из URL 1, но Я хочу данные из Url 5!

console.log(getTimes) возврат данных из Url 5

console.log(times) возврат данных из Url 1

местоположение щелчка 7:

Я получаю данные из Url 5 (состояние предварительного просмотра!).

console.log(getTimes) возвращает данные из Url 7

console.log(times) возвращает данные из Url 5

щелкните location 44:

и когда я меняю местоположение 44, я получаю данные из URL 7

console.log(getTimes), возвращаю данные из Url 44

console.log(times) возвращаю данные с URL 7

== Daily.js ==

function Daily({ locationProps = 1, root }) {
      const context = useContext(ThemeContext);
      const localization = useCallback(() => {
        if (root && cookies.get("location") !== undefined) {
          return cookies.get("location");
        }
        return locationProps;
      }, [locationProps, root]);

    const _data = useRef(new Data());

    useEffect(() => {
      _data.current.getTimesFromGoogleSheets();
      }, [locationProps]);


    const getTimes =()=>  _data.current.getTimes();

    const times = useState(()=>getTimes());  <------- here is the problem useState dont update



**==data.js==**

class Data {
  constructor(locationProps) {
    this.locationProps=locationProps
    this.updateData();
  }

  getTimes(date = null) {
    date = date === null ? moment().format('DD/MM/YYYY') : date;
    var data = this.getData();
    return data ? data[date] : [];
  }

  getSpeadsheetUrl() {
    return config.Data[this.locationProps];
  }



  getTimesFromGoogleSheets() {
    var spreadsheetUrl = this.getSpeadsheetUrl();

    if (!spreadsheetUrl) {
      alert('CSV not set');
    }

    return csvtojson()
      .fromStream(request.get(`${spreadsheetUrl}&_cacheBust=${Math.random()}`))
      .then(json => {
        this.storeData(json);
      });
  }

  storeData(Data = []) {
    var formatted_data = {};
    Data.forEach(day => {
      formatted_data[day.Date] = day;
    });
    window.localStorage.setItem('Data', JSON.stringify(formatted_data));
    window.localStorage.setItem('Data_lastUpdated', moment().unix());
  }

  getData() {
    var _Data = window.localStorage.getItem('Data');
    return _Data ? JSON.parse(_Data) : null;
  }

  getLastUpdatedTime() {
    return window.localStorage.getItem('Data_lastUpdated');
  }

  updateData() {
    var lastUpdatedDiff = moment().unix() - parseInt(this.getLastUpdatedTime());
    var alreadyHasData = this.getData() ? true : false;
    if (
      lastUpdatedDiff > config.Data.refreshRate * 60 ||
      !alreadyHasData
    ) {
      this.getTimesFromGoogleSheets().then(() => {
        if (!alreadyHasData) {
          setTimeout(function() {
            window.location.reload();
          }, 2000);
        }
      });
      console.info('Updating Data....');
    }
  }

Answer 1

Исходя из того, что я знаю до сих пор, вы, скорее всего, ищете что-то вроде этого:

function Daily({ locationProps = 1, root }) {
    const context = useContext(ThemeContext);
    const localization = useCallback(() => {
        if (root && cookies.get("location") !== undefined) {
            return cookies.get("location");
        }
        return locationProps;
    }, [locationProps, root]);

    const _data = useRef(new Data());

    // Use times to display, use setTimes to change the data, maybe as part of your effect?
    const [times, setTimes] = useState(_data.current.getTimes());

    useEffect(() => {
        _data.current.getTimesFromGoogleSheets();
        const newTimes = _data.current.getTimes();
        setTimes(newTimes);
    }, [locationProps]);

    // times.map(...)
}