Javascript ReactJs-组件嵌套以显示突然工作的嵌套数据

我的数据是：

[{
        "id": 1,
        "label": "List item 1",
        "parent_id": 0,
        "children": [{
                "id": 5,
                "label": "List item 1",
                "parent_id": 1
            },
            {
                "id": 6,
                "label": "List item 1",
                "parent_id": 1
            },
            {
                "id": 7,
                "label": "List item 1",
                "parent_id": 1
            },
            {
                "id": 8,
                "label": "List item 1",
                "parent_id": 1,
                "children": [{
                        "id": 9,
                        "label": "List item 1",
                        "parent_id": 8
                    },
                    {
                        "id": 10,
                        "label": "List item 1",
                        "parent_id": 8
                    }
                ]
            }

        ]
    },
    {
        "id": 2,
        "label": "List item 1",
        "parent_id": 0
    }
]

My App.js组件如下所示：

import React, {useState} from 'react';
import {apiData} from './data/api';
import './App.css';
import {NestedLists} from './components/NestedLists';

const App = () => {
  return (
    <div className="container">
       <h3>Calling a nested component</h3>
       <NestedLists filteredData = {data} />
      </div>
  )
}
export default App;

import React，{useState}来自“React”；
从“./data/api”导入{apiData}；
导入“/App.css”；
从“./components/NestedLists”导入{NestedLists}；
常量应用=（）=>{
返回(
调用嵌套组件
)
}
导出默认应用程序；

嵌套列表组件：

import React from 'react'

export const NestedLists = ({filteredData}) => {
    return (
        <ul>
            {filteredData && filteredData.map((m,i) => {
                return (
                <li key={m.label}>
                 {m.id}
                 {m.children && <NestedLists filteredData={m.children} />}
                </li>
        );
      })}
        </ul>
    )
}

从“React”导入React
导出常量嵌套列表=（{filteredData}）=>{
返回(

{filteredata&&filteredata.map（（m，i）=>{
返回(

{m.id}
{m.children&&}

);
})}

)
}

当我检查结果时，有相同的嵌套打印两次，如下图所示，这应该不会发生： 这里1:5,6,7,8重复两次，8:9,10重复两次，这是不应该发生的。这里少了什么

---

工作正常。检查你在哪里出错。我试过这个

import React from 'react';


const App = () => {

  const data = [{
    "id": 1,
    "label": "List item 1",
    "parent_id": 0,
    "children": [{
            "id": 5,
            "label": "List item 1",
            "parent_id": 1
        },
        {
            "id": 6,
            "label": "List item 1",
            "parent_id": 1
        },
        {
            "id": 7,
            "label": "List item 1",
            "parent_id": 1
        },
        {
            "id": 8,
            "label": "List item 1",
            "parent_id": 1,
            "children": [{
                    "id": 9,
                    "label": "List item 1",
                    "parent_id": 8
                },
                {
                    "id": 10,
                    "label": "List item 1",
                    "parent_id": 8
                }
            ]
        }

    ]
},
{
    "id": 2,
    "label": "List item 1",
    "parent_id": 0
}
]

const NestedLists = ({filteredData}) => {
  return (
      <ul>
          {filteredData && filteredData.map((m,i) => {
              return (
              <li key={m.label}>
               {m.id}
               {m.children && <NestedLists filteredData={m.children} />}
              </li>
      );
    })}
      </ul>
  )
}

return (
  <div className="container">
     <h3>Calling a nested component</h3>
     <NestedLists filteredData = {data} />
    </div>
)
}

export default App;

从“React”导入React；
常量应用=（）=>{
常数数据=[{
“id”：1，
“标签”：“列表项1”，
“父项id”：0，
“儿童”：[{
“id”：5，
“标签”：“列表项1”，
“家长id”：1
},
{
“id”：6，
“标签”：“列表项1”，
“家长id”：1
},
{
“id”：7，
“标签”：“列表项1”，
“家长id”：1
},
{
“id”：8，
“标签”：“列表项1”，
“家长id”：1，
“儿童”：[{
“id”：9，
“标签”：“列表项1”，
“家长id”：8
},
{
“id”：10，
“标签”：“列表项1”，
“家长id”：8
}
]
}
]
},
{
“id”：2，
“标签”：“列表项1”，
“父项id”：0
}
]
常量嵌套列表=（{filteredData}）=>{
返回(

{filteredata&&filteredata.map（（m，i）=>{
返回(

{m.id}
{m.children&&}

);
})}

)
}
返回(
调用嵌套组件
)
}
导出默认应用程序；

我认为你没有在App.js文件中传递正确的数据

   import {apiData} from './data/api';

   <NestedLists filteredData = {data} /> 

从'/data/api'导入{apiData}；

换成

   <NestedLists filteredData = {apiData} /> 

---

在stackblitz中尝试了相同的代码，工作正常。