Question

我目前正在开发一个使用react-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（如我的Weather组件：

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

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

有没有什么方法可以阻止用户刷新，或者默认情况下将用户刷新时重定向到主页面（即path =＆＃34; /＆＃34;）？

Answer 1

我认为你有几种方法可以解决这个问题。一种方法是@Pat Mellon如何描述并添加刷新状态和重定向，如果它是真或假（但是你想要构建逻辑）。

您还可以添加一些默认逻辑，这更像是一个反应＆＃39;做事的方式。例如，如果应用程序没有看到用户信息，只需输出一些示例天气。

接下来将添加url逻辑并将用户数据粘贴到url本身。有点像API调用，应用程序将查看网址，而不是状态来拉取信息显示。（看看trim有一个很好的方法）

另一种可能比UX更友好的方法是将表单中的数据保存到用户的URI.js中。使用此方法将允许您维护数据并使用它，即使页面被刷新，关闭，计算机重新启动等等。唯一需要注意的是记住清除用户的本地存储（更重要的是，信息如果用户要在表单中重新输入信息，那么您保存而不是其他网站的保存。

很多有趣的方法来解决这个问题，而且我确信还有超过我列出的四个。

使用API调用刷新React路由器

1 个答案:

使用API​​调用刷新React路由器

1 个答案:

使用API调用刷新React路由器