呈现 API 数据

Question

我正在尝试进行 API 调用并有条件地将数据呈现到页面。如果它满足特定条件（在本例中为日期），我想显示它，否则我不希望它显示在页面上。但是，当我输入 null 时，我的控制台中仍然有 4 个项目记录为“null”（我只希望显示 'display to page' 项目）。我在以前的项目中采用了这种方法并且它有效......有人知道这里会发生什么吗？任何见解将不胜感激，谢谢！

useEffect(() => {
axios({
  method: "get",
  url: `http://dataservice.accuweather.com/forecasts/v1/daily/5day/${userInput}`,
  params: {
    apikey: "<API_key>",
  },
})
  .then((response) => {
    setWeatherData(
      response.data.DailyForecasts.map((item) => {
        console.log(
          item.Date === "2022-05-31T07:00:00-04:00"
            ? "display to page"
            : null
        );
      })
    );
  })
  .catch((error) => {
    console.log(error);
  });
  }, [userInput]);

在 jsx 中映射它时，我这样做了：

 <section className="wrapper weatherContainer">
   {weatherData.map((data) => {
    console.log(data);
    return (
      <div className="topContainer">
       
        {/* if date matches today's date, display on top container, otherwise don't display anything */}
        {
          data.Date === "2022-05-31T07:00:00-04:00" ? (
            <div className="topContainer">
              <h1>Today</h1>
              <p>
                <img
                  src={require(`../../assets/${data.Day.Icon}.png`)}
                  alt={data.Day.IconPhrase}
                />
                {toCelcius(data.Temperature.Maximum.Value).toFixed(0)}&#176;
              </p>
              <p>{data.Day.IconPhrase}</p>
            </div>
          ) : null
        }
      </div>
    );
  })}
</section>

Answer 1

您没有正确登录。看，在你的三元运算符中，你说 if true - log "display to page"，else log null。仅记录

的元素

item.Date === "2022-05-31T07:00:00-04:00"

你需要这样做

if(item.Date === "2022-05-31T07:00:00-04:00") console.log(item)

Answer 2

空 <div> 会出现，因为 <section> 标签 return 和 <div className="topContainer"> 中的第一个映射函数即使项目不匹配也是如此。仅当项目匹配时才返回该项目。

<section className="wrapper weatherContainer">
    {weatherData.map((data) => {
    console.log(data);
    return (
        data.Date === "2022-05-31T07:00:00-04:00" ? (
            <div className="topContainer">
                <h1>Today</h1>
                ... rest of the elements
            </div>
        ) : null
    );
    })}
</section>

呈现 API 数据

Rendering API data

javascript

conditional-statements

reactjs