Javascript React functional components：返回嵌套对象数组中的数组列表

我有一个对象数组，里面有一个数组，我想创建一个列表，首先包含一些顶级对象属性，然后映射每个对象的数组元素，并在列表上的JSX中显示它们。。。 我是在一个React函数组件中做这项工作的，所以没有渲染函数，只有一个返回…，我已经在这里看过了：这里：但不知何故，这不起作用

这是我的密码：

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;

---

不知何故，我无法在两个数组上进行迭代…

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

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

---

我只是还不能完全确定为什么会这么复杂，我看不出逻辑或缺失的部分可以让它像这样工作。

如果你真的不明白你改变了什么，或者它有什么帮助，这可能不会对其他有类似问题的人有用，尤其是因为你的问题没有包括他们搜索错误的细节——语法错误？我建议删除这整篇文章，我建议只看这整篇文章，因为它代表了我问题的有效解决方案；但这里的问答的目的是帮助其他人解决同样的问题——就目前而言，他们没有办法解决。找到这个或2。了解发生了什么变化及其原因。有些人在看到工作示例时了解问题和解决方案，而有些人则不。。。我认为有一个解决方案比没有好？顺便说一句，我现在理解了语法，我只是缺少了一个顶级div，Javascript表达式必须在{…}之间和每个.map函数内部呈现，您必须为每个数组元素返回JSX表达式，并且必须将其放在大括号之间，因为表达式本身是一个Javascript函数，这样，你可以将它层叠嵌套在每个照片中，这是真的，但是对于那些不想在头脑中区分它的人来说，最好包括“什么”和“为什么”并将其弄清楚。这并不能改变这样一个事实，即有人坐在那里看你犯过的同样的错误，却找不到这个问题，因为它不包括在内。因此，除非你愿意大幅改进问答，否则我建议删除。