Question

我有在对象中构造的数据，我想在react return函数中嵌套映射以根据选定的日期呈现工作表。

这是我正在使用的数据：

[  
   {  
      "date":"Saturday, May 11th",
      "workouts":[  
         {  
            "id":1,
            "full":true,
            "difficulty":"Open",
            "time":"1:15pm",
            "nbr_rounds":10,
            "trainer":"Tommy Duquette"
         },
         {  
            "id":2,
            "full":true,
            "difficulty":"Intermediate",
            "time":"2:45pm",
            "nbr_rounds":4,
            "trainer":"Tommy Duquette"
         },
         {  
            "id":3,
            "full":false,
            "difficulty":"Intermediate",
            "time":"3:30pm",
            "nbr_rounds":4,
            "trainer":"Tommy Duquette"
         },
         {  
            "id":4,
            "full":false,
            "difficulty":"Open",
            "time":"4:20pm",
            "nbr_rounds":8,
            "trainer":"Tommy Duquette"
         },
         {  
            "id":5,
            "full":false,
            "difficulty":"Open",
            "time":"5:20pm",
            "nbr_rounds":8,
            "trainer":"Tommy Duquette"
         }
      ]
   },
   {  
      "date":"Sunday, May 12th",
      "workouts":[  
         {  
            "id":6,
            "full":true,
            "difficulty":"Open",
            "time":"1:15pm",
            "nbr_rounds":10,
            "trainer":"Tommy Duquette"
         },
         {  
            "id":7,
            "full":false,
            "difficulty":"Intermediate",
            "time":"2:45pm",
            "nbr_rounds":4,
            "trainer":"Tommy Duquette"
         },
         {  
            "id":8,
            "full":false,
            "difficulty":"Open",
            "time":"3:30pm",
            "nbr_rounds":4,
            "trainer":"Tommy Duquette"
         },
         {  
            "id":9,
            "full":true,
            "difficulty":"Intermediate",
            "time":"4:20pm",
            "trainer":"Tommy Duquette"
         },
         {  
            "id":10,
            "full":false,
            "difficulty":"Open",
            "time":"5:20pm",
            "nbr_rounds":8,
            "trainer":"Tommy Duquette"
         }
      ]
   }
]

我想查看一下对象日期是否与作为道具传递的所选日期匹配。然后，我想根据日期匹配来绘制和渲染锻炼。

这是我的代码：

export default function ClassList(props){
    return(
        <div>
            {
                props.data.map((data) => {
                    if(data.date === props.selectedDate){
                        <div>
                        {
                            data.workouts.map((class) => {
                                return(
                                    <div>
                                        {class.full}
                                    </div>
                                )
                            })
                        }
                        </div>
                    }
                })
            }
        </div>
    )
};

第二个映射函数出现解析错误：

./src/components/classList.jsx
  Line 11:  Parsing error: Unexpected token, expected "{"

   9 |                         <div>
  10 |                         {
> 11 |                             data.workouts.map((class) => {
     |                                                     ^
  12 |                                 return(
  13 |                                     <div>
  14 |                                         {class.full}

Answer 1

class是javascript中的保留字，因此您应该尝试其他方法变量名而不是class

再次，更改此

data.workouts.map((class) => {
-------------------^---^

对此：

data.workouts.map((workout) => {

问题嵌套映射对数组的反应

1 个答案: