Question

我正在使用OpenWeather API进行5天3小时的天气预报，我的响应JSON给了我40个数组项。我正在过滤数组，以便可以获取每日温度（15:00:00），然后使用map渲染每个项目。但是，当我需要40个项目才能在同一组件的背面呈现3小时的预测时，剩下的阵列便是5个项目。

这个想法是使用我的翻转CSS功能在卡的正面绘制每日温度，在卡的背面呈现3小时的预报。因此，当您按下即时贴时，它将翻转到背面并提供3小时的预测。

当我将数组过滤为5个项目时，如何在同一组件中呈现每日温度并仍然呈现3小时预报？

任何想法将不胜感激！

fetch(
  "https://api.openweathermap.org/data/2.5/forecast?q=" +
    this.state.userInput +
    "&units=metric&APPID="
)
  .then(results => {
    return results.json();
  })
  .then(data => {
    let days = data.list.filter(day => {
        return day.dt_txt.endsWith("15:00:00");
      })
      .map((day, index) => {
        return (
          <CardComponent
            i={index}
            flip={e => {
              let card = document.getElementById(index);
              card.classList.toggle("is-flipped");
            }}
            date={day.dt_txt.slice(5, 11)}
            temp={Math.round(day.main.temp)}
          />
        );
      });
    this.setState(() => {
      return {
        days: days,
        userInput: ""
      };
    });
  })
  .catch(error => {});

};

Answer 1

我强烈建议您将组件移出fetch调用，而不要使用setState：

state = { days: [] }

let days = data.list.filter(day => {
  return day.dt_txt.endsWith("15:00:00");
})

this.setState({ days })

然后在渲染器中

<div>
  {this.state.days.length > 0 ?
    this.state.days.map(d => <CardComponent data={d} />) :
    <div>Loading...</div>
  }
</div>

这样，您可以呈现加载消息，然后在拥有数据后填充组件。这样，您就可以在CardComponent组件中假设您拥有前状态和后状态所需的所有数据。

这还将使您的加载和错误状态更容易处理。

编辑：

要遍历日期并为五天中的每一天创建预测数组，我在这里创建了一个非常粗糙的示例：https://codesandbox.io/s/n1wpjoy1l0

我使用了一个for循环来进行5次迭代，并增加1天，每次都创建一个过滤数组，匹配当天的天数。

使用API过滤和映射问题

1 个答案:

使用API​​过滤和映射问题

1 个答案:

使用API过滤和映射问题