React 在循环内渲染循环答案

【问题标题】：React rendering a loop inside a loopReact 在循环内渲染循环
【发布时间】：2020-05-28 17:37:00
【问题描述】：

尝试在循环内循环并得到错误：value.forEach 不是函数。

不知道如何在渲染中编写此代码

render(){

    return(
        Object.entries(this.props.detailOras).map(([key, value])=>{

       return(
            <div className="flex-row">
            <div className="flex-cont">
                <div>Laikas</div>
                <div>Temperatūra </div>
                <div>Vėjas</div>  
                <div>Krituliai</div>
            </div>

                {value.forEach(day => {
                    return(
                        <div className="flex-cont">
                            <div>{day.forecastTimeUtc.slice(11,16)}</div>
                                <div>{day.airTemperature} </div>
                                <div>{day.windSpeed}</div>  
                                <div>{day.totalPrecipitation}</div>
                            </div>
                          )
                })}
                     </div>
        )
                }


        ))}

【问题讨论】：

this.props.detailOras 的值是多少？该对象的值是什么？
试试这个 { !value?null: value.forEach ....
console.log(detailOras): 2020-05-28: 预测: Array(7) 0: {forecastTimeUtc: "2020-05-28 17:00:00", airTemperature: 16.8, windSpeed : 5, windGust: 10, windDirection: 6, …} 1: {forecastTimeUtc: "2020-05-28 18:00:00", airTemperature: 16.4, windSpeed: 4, windGust: 9, windDirection: 4, …} 。 ..... 2020-05-29：{预测：数组（24）} 2020-05-30：{预测：数组（22）}
您可以在您的问题下点击 edit 以将格式化的内容包含到您的问题中:)
{ 2020:05:28:{ 预测：[ 1: [ {airtemp: xx},{windspeed: xx} .....] 2: [ {airtemp: xx},{windspeed : xx} .....] ... ]}

标签： javascript reactjs loops

【解决方案1】：

如果value 在后续阶段填充为数组，则以下应该可以工作。

render(){

    return(
        Object.entries(this.props.detailOras).map(([key, value])=>{

       return(
            <div className="flex-row">
            <div className="flex-cont">
                <div>Laikas</div>
                <div>Temperatūra </div>
                <div>Vėjas</div>  
                <div>Krituliai</div>
            </div>
                {(value.forecast || []).map(day => {
                    return(
                        <div className="flex-cont">
                            <div>{day.forecastTimeUtc.slice(11,16)}</div>
                            <div>{day.airTemperature} </div>
                            <div>{day.windSpeed}</div>  
                            <div>{day.totalPrecipitation}</div>
                        </div>
                    )
                })}
            </div>
        )
    }
))}

【讨论】：