ReactJs - компонент вложенности для отображения вложенных данных работает внезапно

Question

Мои данные:

[{
        "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
    }
]

Мое приложение. 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;

Компонент NestedList:

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

Когда я проверьте результаты, там же напечатано вложение дважды, как показано на рисунке ниже, что не должно происходить: здесь внутри 1: 5,6,7,8 повторяется дважды, а внутри 8: 9,10 повторяется дважды, что не должно происходить. чего здесь не хватает?

Answer 1

Работает нормально. Проверьте, где вы делаете ошибку. я пробовал это

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;

Я думаю, что вы не передаете правильные данные здесь в вашем приложении. js файл

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

   <NestedLists filteredData = {data} /> 

измените его на

   <NestedLists filteredData = {apiData} />