Question

我有一个对象数组，这些对象本身都有一个数组，我想创建一个带有一些顶级对象属性的列表，然后映射每个对象的数组元素，并在列表中的JSX中显示它们。 .. 我在React函数组件中执行此操作，因此没有render（）函数，只有返回（...），我已经在这里查看：React JSX: rendering nested arrays of objects和此处：REACT: Map over nested array of objects，但以某种方式那没用。

这是我的代码：

import React from 'react';
import Anzeige from '../pages/gebuchte-stellenanzeigen';

const anzeigenArray = (props) => {
    let style;
    if (props.aussehen != null) {
        style = props.aussehen;
    }else {
        style = {};
    }

    let docs = props.anzeigenArray;

    const filterByDay = (entr, idx) => {
        const dayInMilliseconds = 24*60*60*1000;
        let now = new Date().getTime();
        let previous = idx;
        let next = idx+1;

        let datenow =  now - (previous*dayInMilliseconds);
        let datethen = now - (next*dayInMilliseconds);

        let arr = entr.filter((anzeige) => {
            let anzeigeDate = new Date(anzeige.createdtimestamp).getTime();
            return ( anzeigeDate > datethen && anzeigeDate <  datenow )
        });
        return arr;
    }

    let filteredArray = [];

    for (let i = 0; i<7; i++) {
        let result = filterByDay(docs,i);
        let doc = {
            'day': i,
            'docs': [...result]
        }
        filteredArray.push(doc);       
    }


    return (filteredArray.map((test,testindex) =>  {
            <p><h2>Tag: {test.day}</h2></p>
            return test.docs.map((anzeige,index) => (                                    
            <li className="mainList" key={anzeige.id} style={style} >
                <Anzeige 
                finished = {props.finished}
                anzeige={anzeige} 
                key={anzeige.id + index}
                index={index}  
                onClickalert={() => props.onClickAlert()}
                onButtonfinish={props.onButtonFinish}
                unDone = {props.onUndone}
                />
            </li> 
        ));                            
    })); 
}

export default anzeigenArray;

我莫名其妙地无法遍历两个数组...

Answer 1

编辑：我终于让它像这样工作：

   return (
    <div>
    {
        filteredArray.map((test,testindex) =>  {
                return (
                <div>
                    <p><h2>Tag: {test.day}</h2></p>
                    { 
                        test.docs.map((anzeige,index) => (                                    
                        <li className="mainList" key={anzeige.id} style={style} >
                            <Anzeige 
                            finished = {props.finished}
                            anzeige={anzeige} 
                            key={anzeige.id + index}
                            index={index}  
                            onClickalert={() => props.onClickAlert()}
                            onButtonfinish={props.onButtonFinish}
                            unDone = {props.onUndone}
                            />
                        </li> 
                        ))
                    } 
                </div>
                )                          
        })
    }
    </div> 
  )

我仍然不确定为什么要这么复杂，我没有看到使它像这样工作的逻辑或缺失的地方。

反应功能组件：在嵌套对象数组内返回数组列表

1 个答案: