如何动态创建新行？

Question

我正在使用 react-bootstrap，我想知道是否可以根据代码动态转到下一行。让我告诉你我正在尝试做什么：

// components/WeatherList.js

import React from 'react'
import { Col, Row } from 'react-bootstrap'
import WeatherCard from './WeatherCard'

const WeatherList = ({weathers}) => {
    console.log("e")
    console.log(weathers)
    return (
        <Row>
           {weathers.list.map(({dt, main, weather}) => (
                <Col key={dt}>
                    <WeatherCard
                    dt={dt * 1000} 
                    temp_min={main.temp_min} 
                    temp_max={main.temp_max} 
                    humidity={main.humidity}
                    temp={main.temp}
                    main={weather[0].main} 
                    city={weathers.city.name}
                    country={weathers.city.country}
                  />
                </Col>
            ))} 
        </Row>
    )
}

export default WeatherList;

我每天最多得到 5 个预测（所以 5 张卡片），但如果我只得到 2 个预测，我想在第二天换行。在图片上你可以看到，我想在日期更改时动态创建一个新行：

我该怎么做？

Answer 1

尝试按天对数据进行分组，每天都会显示一组卡片，然后在反应代码中您将有两个循环：

几天
对于卡片

即结构

{
  '2020-10-10': [card1, card2....],
  '2020-10-11': [card1, card2....],
  ...
}

React 代码看起来像

Object.keys(days).map((key) => (
  <Row>
    {days[key].map((card) => <Card {...card} />)}
  </Row>
))

您可以对嵌套数组执行相同的操作，这可能会更容易

Answer 2

我会尝试这样将天气对象过滤成天数组：

import React, { useEffect, useState } from 'react'
import { Col, Row } from 'react-bootstrap'
import WeatherCard from './WeatherCard'

const WeatherList = ({weathers}) => {
    console.log("e")
    console.log(weathers)
    
    const [weathersDays, setWeathersDays] = useState([]); // An array of weather objects for a day

    useEffect(()=>{
        let previousDay = null;
        tempDays = []
        returnDays = []
        // Loop through weathers to split by day
        weathers.list.map(({dt, main, weather}) => {
                const currentDate = new Date()
                currentDate.setTime(dt*1000);
                const currentDay = currentDate.getDay() // An integer representing the day
                if (previousDay == null) {
                    // The first day (Edge Case), just push to the current day
                    previousDay = currentDay;
                    tempDays.push({dt, main, weather})
                }
                else if (previousDay == currentDay) {
                    // Same day, so push to list for current day
                    tempDays.push({dt, main, weather})
                }
                else {
                    // This is a new day, push list of old days and start a new tempDays list
                    returnDays.push(tempDays);
                    previousDay = currentDay;
                    tempDays = [];
                    tempDays.push({dt, main, weather});
                }
            })
        // Catch the last group of days if not empty
        if (tempDays.length > 0){
            returnDays.push(tempDays);
        }
        setWeathersDays(returnDays);
    },[weathers])

    return (
        <>
            {weathersDays.map(weatherDay => {
            <Row>
                {weatherDay.map(({dt, main, weather}) => (
                    <Col key={dt}>
                        <WeatherCard
                        dt={dt * 1000} 
                        temp_min={main.temp_min} 
                        temp_max={main.temp_max} 
                        humidity={main.humidity}
                        temp={main.temp}
                        main={weather[0].main} 
                        city={weathers.city.name}
                        country={weathers.city.country}
                    />
                    </Col>
                ))} 
            </Row>
            })
            } 
        </>
    )
}

export default WeatherList;

如何动态创建新行？

How to dynamically create a new row?

reactjs

react-bootstrap

bootstrap-grid