I am doing a weather app and so far so good. I now want to render some extra information on a button click. I have a 5 day forecast and want to then show each day's info. I have filtered the data successfully but can't get my map of the data to then render. Here is some of my code to show what I am trying to do (lots of console logs as I look to see whats working). Thanks for any info you can give me. Cheers,

我正在做一款天气应用程序，到目前为止还不错。现在，我想通过单击按钮来呈现一些额外的信息。我有一个5天的预报，然后想显示每一天的信息。我已经成功地过滤了数据，但无法获得要渲染的数据地图。以下是我的一些代码，用来显示我正在尝试做的事情(在我查看工作情况时，有很多控制台日志)。谢谢你能给我的任何信息。干杯,

This is from my componant that has the button (which is part of a map itself:

这是来自我的组件，它有按钮(它是贴图本身的一部分：

 return (
               <div> 
           <><motion.button onClick={() => Weather5day(forecast, noonCast.dt)}        className='weatherFSmall' initial={{ scale: 0 }} animate={{ scale: 1 }} transition={{ delay: (1.3 + (index     / 2)) }} key={index}>

I plan to tidy it up late w.r.t the motion element.

我打算晚点把它整理好。不是运动元素。

Here is a componant I am then calling (some is commented out as they don't work properly so I'll work on that later. Thanks in advace for any tips. The data I need does pass.

下面是我正在调用的一个组件(有些组件被注释掉了，因为它们不能正常工作，所以我将在稍后处理它。感谢Avance的任何提示。我需要的数据确实通过了。

 export function Weather5day (fiveDayData,forecastArray) {
 console.log(fiveDayData);
 let fiveDayArry=[]
 let k=0
 console.log(forecastArray)   
 for (let i=0; i<fiveDayData.length;i++) {
 if (fiveDayData[i].dt == forecastArray) {
    if (i-3<0){k = 0}else {k=i-3}
    fiveDayArry = fiveDayData.slice(k,i+5)
   /* console.log(fiveDayD)  */
}

}
console.log(fiveDayArry)

}console.log(FiveDayArry)

return (
<div className='forecastContainer'>  
    {fiveDayArry.map((fiveDayArry) => {
        /* let windData = fiveDayArry.wind.deg */
        /* let windDir = WindCalc(windData) */
        
            <div className='weatherFSmall'>
                <h4>Avg Temp: {Math.round(fiveDayArry.main.temp)}°C</h4>
                    <h4>Weather: {fiveDayArry.weather[0].main}</h4>
                    <img src={`http://openweathermap.org/img/w/${fiveDayArry.weather[0].icon}.png`} alt="Weather Icon" width="50" height="50" />
                    <h4>Wind Speed: {Math.round(fiveDayArry.wind.speed * 2.37)} mph</h4>
                    {/* <h4>Wind Direction {windData}</h4> */}
            </div>
      
    })}


  </div>
 )

}

You're not returning the JSX on your map function, just add an extra return inside of your map and it should work.

您不会在map函数上返回JSX，只需在map中添加额外的返回，它就应该可以工作了。

See the example below:

请参见下面的示例：

export function Weather5day(fiveDayData, forecastArray) {
  console.log(fiveDayData)
  let fiveDayArry = []
  let k = 0
  console.log(forecastArray)
  for (let i = 0; i < fiveDayData.length; i++) {
    if (fiveDayData[i].dt == forecastArray) {
      if (i - 3 < 0) {
        k = 0
      } else {
        k = i - 3
      }
      fiveDayArry = fiveDayData.slice(k, i + 5)
      /* console.log(fiveDayD)  */
    }
  }
  console.log(fiveDayArry)

  return (
    <div className="forecastContainer">
      {fiveDayArry.map((fiveDayArry) => {
        /* let windData = fiveDayArry.wind.deg */
        /* let windDir = WindCalc(windData) */

        return (
          <div className="weatherFSmall">
            <h4>Avg Temp: {Math.round(fiveDayArry.main.temp)}°C</h4>
            <h4>Weather: {fiveDayArry.weather[0].main}</h4>
            <img
              src={`http://openweathermap.org/img/w/${fiveDayArry.weather[0].icon}.png`}
              alt="Weather Icon"
              width="50"
              height="50"
            />
            <h4>Wind Speed: {Math.round(fiveDayArry.wind.speed * 2.37)} mph</h4>
            {/* <h4>Wind Direction {windData}</h4> */}
          </div>
        )
      })}
    </div>
  )
}