React Router при обновлении с вызовом API

Question

В настоящее время я работаю над погодным приложением, созданным с помощью response-create-app, которое работает на React Router для отображения данных за 5 разных дней.Каждый день (представлен в рамке) представляет собой ссылку, которая перенаправляет второй компонент на него, чтобы он мог отображать более подробные данные за определенный день.

У меня есть функция, которая генерирует данные для каждой плитки:

    generateTileData() {
    const weatherData = this.state.data;
    if (!weatherData) return null;
    let days = [];

    const newData = [...weatherData].filter(day => {
      let dateFromAPI = moment.unix(day.dt).date();
      if (days.indexOf(dateFromAPI) > -1) {
        return false;
      } else {
        days.push(dateFromAPI);
        return true;
      }
    });
    // console.log(days)

    return newData.map((day, item) => {
      const dateId = day.dt;
      return (
        <Link to={`/w/${dateId}`}>
          <WeatherTile key={day.dt} index={item} {...day} date={day.dt_txt} />
        </Link>
      );
    });
  }

Что затем отображается:

       <HashRouter>
          <React.Fragment>
            <div className="columns is-gapless tiles">
              {this.generateTileData()}
            </div>
          {weatherData && <Route exact path="/w/:dateId" render={({ match }) => <Weather data={weatherData} day={[...weatherData].find(day => day.dt == match.params.dateId)} />} />}
         </React.Fragment>
        </HashRouter>

Проблема заключается в том, что при извлеченииданные (через форму) только после того, как пользователь вводит их, когда я случайно обновляю страницу, приложение не знает, откуда поступают данные, и, таким образом, выдает мне приятную ошибку, что оно не может прочитать свойство main из undefined (как вмой компонент Погода:

const Weather = ({ day }) => {
  console.log(day);
  const data = day;

  return (
    <div className="info">
      <p>{data.main.temp}</p>
      <p>{data.main.humidity}</p>
    </div>
  )
}

Можно ли как-либо запретить пользователю обновление или по умолчанию перенаправить пользователя при обновлении на главную страницу (это будет путь = "/")?

Answer 1

Есть несколько способов обойти эту проблему.Один из способов - описать @Pat Mellon и добавить состояние обновления и перенаправления, если оно будет истинным или ложным (однако вы хотите построить логику).

Вы могли бы также добавить некоторую логику по умолчанию, которая является более "React" -ым способом ведения дел.Например, если приложение не видит никакой пользовательской информации, просто выведите пример погоды.

Следующим шагом будет добавление логики URL и вставка пользовательских данных в сам URL.Вроде как вызов API, приложение будет смотреть на URL-адрес, а не на состояние, чтобы получить информацию для отображения.(Посмотрите на URI.js , чтобы узнать, как это сделать)

Еще один способ, который может быть немного более удобен для UX - это сохранить данные из формы в пользователя.локальное хранилище .Использование этого метода позволит вам поддерживать данные и использовать их, даже если страница обновляется, закрывается, компьютер перезагружается и т. Д. Единственное предостережение - не забывать очищать локальное хранилище пользователя (и, что более важно, информацию, которую вы сохранили ине то, что на других сайтах), если пользователь когда-либо повторно введет информацию в вашу форму.

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