React天气应用：按钮点击后数组Map渲染失败求助

我正在开发一款天气应用，整体进展顺利。现在需要实现点击按钮后渲染额外的天气信息：已有5天预报数据，希望展示每日详情。目前已经成功过滤出目标数据，但无法通过数组Map方法将数据渲染出来。附上相关代码（含调试用console.log），恳请大家提供解决建议。

按钮所在组件代码（按钮处于Map循环内） #

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}
      >
        {/* 按钮内容 */}
      </motion.button>
    </>
  </div>
)

注：后续会优化motion元素。

Weather5day组件代码（部分未正常工作代码已注释，所需数据已成功传递） #

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) */
        
        <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>
  )
}

解决建议 #

• 组件调用方式错误：onClick事件里直接调用Weather5day只是执行函数，不会渲染组件。应该用状态控制组件的显示：

  1. 在父组件中定义状态：const [showDetail, setShowDetail] = useState(null);
  2. 点击按钮时设置状态：onClick={() => setShowDetail({ forecast, dt: noonCast.dt })}
  3. 在父组件中条件渲染Weather5day：{showDetail && <Weather5day fiveDayData={showDetail.forecast} forecastArray={showDetail.dt} />}

• Map循环未返回元素：map回调函数里没有return JSX元素，导致无法渲染。修改方式二选一：

  • 添加return语句：

    fiveDayArry.map((dayData) => {
      return (
        <div className='weatherFSmall' key={dayData.dt}>
          {/* 内容 */}
        </div>
      )
    })
    

  • 改用隐式返回（大括号换小括号）：

    fiveDayArry.map((dayData) => (
      <div className='weatherFSmall' key={dayData.dt}>
        {/* 内容 */}
      </div>
    ))
    

• 变量命名冲突：map的参数名和数组名都是fiveDayArry，会导致作用域混淆，建议改成更清晰的名字，比如dayData。

• 组件参数接收规范：React组件接收单个props对象，而非独立参数。修改组件的参数接收方式：

  export function Weather5day ({ fiveDayData, forecastArray }) {
    // 原有逻辑
  }
  

• 添加key属性：Map循环渲染的元素必须有唯一key，建议用数据项的dt作为key，避免React警告。

内容的提问来源于stack exchange，提问作者Steve