如何动态创建新行？答案

【问题标题】：How to dynamically create a new row?如何动态创建新行？
【发布时间】：2021-08-19 14:08:46
【问题描述】：

我正在使用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 个预测，我想在第二天换一个新行。在您可以看到的图片上，我想在日期变化时动态创建一个新行：

我该怎么做？

【问题讨论】：

你的dt 对象是什么，以毫秒为单位的日期？
好吧，我会每天对卡片进行分组，然后将每一天都呈现为新行，其中包含分组卡片
@TumoMasire 是的
@TheReason 这是个好主意
@TheReason 如果您有任何样品可以帮助我，我将不胜感激，我目前正在解决您的想法

标签： reactjs react-bootstrap bootstrap-grid

【解决方案1】：

我会尝试这样的方法将天气对象过滤成天：

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;

【讨论】：

【解决方案2】：

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

几天
用于卡片

即结构

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

React 代码如下所示

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

你可以对嵌套数组做同样的事情，这可能会更容易

【讨论】：