React 在循環內渲染循環

Question

嘗試在循環內循環並出現錯誤：value.forEach 不是 function。

不知道如何在渲染中編寫此代碼

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


        ))}

Answer 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>
        )
    }
))}