Как перебрать все объекты, полученные в качестве реквизита от его родителя в React JS

Question

Я использую реагирующе доступный аккордеон.Я хочу заполнить самый внутренний дочерний компонент данными, полученными в качестве реквизита от родительского компонента.

Для этого я делаю что-то вроде ниже в моих соответствующих компонентах:

Родительский компонент -

import React from 'react';
import ReactDOM from 'react-dom';
import ChildAccordion1 from './ChildAccordion1'


import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';


import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';


class ParentAccordion extends React.Component {

   getMappedData = () =>{ 
    const myObj = [
        {"Name":"John Doe", "City": "Chicago","ID":1,"address": "207 Mills Town"},
        {"Name":"Ramph Brown", "City": "LA","ID":2,"address":"508 Mills Town"}
    ];
      if (myObj) { 
         return myObj.map(item =>{
             console.log(item);
            return (
                <Accordion>
                    <AccordionItem>
                        <AccordionItemTitle>
                        </AccordionItemTitle>
                        <AccordionItemBody>
                        <ChildAccordion1 {...item} />
                        </AccordionItemBody>
                    </AccordionItem>
                </Accordion>
            )
        })
      }
      else {
          return "";
      }
  }


    render(){
        return (
            // RENDER THE COMPONENT
            <div>
                {this.getMappedData()}
            </div>
        );
    }
}




export default ParentAccordion

Здесь, если вы видите, я передаю только элемент какпринадлежит моему дочернему компоненту, т.е. только объектам.

Дочерний компонент1 -

import React from 'react';
import ReactDOM from 'react-dom';
import InnerMostChildComp from './InnerMostChildComp'

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';


import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';


class ChildAccordion1 extends React.Component {

    render(){
        const propToChild = this.props;
        return (
            // RENDER THE COMPONENT
            <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
            </AccordionItemTitle>
            <AccordionItemBody>
                <table className="accordionTable">
                    <thead className="row">
                        <th className="col-sm-6">Name</th>
                        <th className="col-sm-6">City</th>
                    </thead>
                    <tbody>
                        <tr className="row">
                            <td className="col-sm-6">Name</td>
                            <td className="col-sm-6">City</td>
                        </tr>
                    </tbody>
                </table>
                <InnerMostChildComp propFromParent = {propToChild}/>
            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
        );
    }
}

export default  ChildAccordion1

Дочерний компонент InnerMost -

import React from 'react';
import ReactDOM from 'react-dom';

import {
    Accordion,
    AccordionItem,
    AccordionItemTitle,
    AccordionItemBody,
} from 'react-accessible-accordion';

import 'react-accessible-accordion/dist/fancy-example.css';
import 'react-accessible-accordion/dist/minimal-example.css';

const InnerMostChildComp = (props) => {
  return (
    <Accordion>
        <AccordionItem>
            <AccordionItemTitle>
                <h4>List</h4>
            </AccordionItemTitle>

            <AccordionItemBody>
                <table className="accordionTable">
                    <thead className="row">
                        <th className="col-sm-2">Name </th>
                        <th className="col-sm-2">City </th>
                        <th className="col-sm-2">Id </th>
                    </thead>

                    <tbody>
                        {
                            Object.keys(props.propFromParent).map((key, index) => {
                                console.log(key, index);
                               return (
                                <tr className="row">
                                    <td className="col-sm-2">{props.propFromParent[key].Name}</td>
                                    <td className="col-sm-2">{props.propFromParent[key].City}</td>
                                    <td className="col-sm-2">{props.propFromParent[key].Id}</td>
                                </tr> 
                               )
                            })
                        }  
                    </tbody>
                </table>
            </AccordionItemBody>
        </AccordionItem>
    </Accordion>
  )
};

export default  InnerMostChildComp

Я хочу, чтобы у каждого tr был выбранатрибуты из индекса объектов разумны, поэтому для этого я использую Object.keys, поскольку реквизиты, которые мы получаем в child, всегда являются компонентом.

Проблема, с которой я сталкиваюсь, заключается в том, что в моем InnerMostChildComp, в моем props.propsfromParent, я получаю первый объект массива, т.е. объект, связанный с ID 1, а затем, когда я помещаю отладчик в td, кажется, что вместо итерациичерез число объектов в моем массиве, равное 2, он перебирает все индивидуальные атрибуты (ключи и значения) моего первого объекта и печатает все ключи и значения.Затем элемент управления снова возвращается в props.propsfromParent, где отображается мой второй объект, и снова происходит итерация внутри одного и того же объекта по ключам и значениям, а это не то, что я хочу.Например, когда я отлаживаю свой InnerMostChildComp, Object.keys выполняет итерации по каждому атрибуту первого объекта, а не по обоим объектам.Мой props.propFromParent действительно показывает второй объект после завершения итерации первого объекта. Возможно, я не правильно использую Object.keys или проблема связана с моим props.propFromParent.

Answer 1

РЕДАКТИРОВАТЬ: Трудно понять, что вы хотите получить в результате, поэтому для простоты ваша таблица (предположительно) должна выглядеть следующим образом:

const myObj = [
  { Name: 'John Doe', City: 'Chicago', ID: 1 },
  { Name: 'Ramph Brown', City: 'LA', ID: 2 } // Note `Name` here instead of your `accessKey`
];

<table className="accordionTable">
  <thead className="row">
  <th className="col-sm-2">Name</th>
  <th className="col-sm-2">City</th>
  <th className="col-sm-2">Id</th>
  </thead>
  <tbody>
    {myObj.map(item => {
      return (
      <tr className="row">
        <td className="col-sm-2">{item['Name']}</td>
        <td className="col-sm-2">{item['City']}</td>
        <td className="col-sm-2">{item['ID']}</td>
      </tr>
      )
    })}
  </tbody>
</table>

РЕДАКТИРОВАТЬ 2:

Итак, propFromParent равно {Name: "John Doe", City: "Chicago", ID: 1}.Следовательно, это:

<tbody>
{
  Object.keys(props.propFromParent).map((key, index) => {
    console.log(key, index);
    return (
      <tr className="row">
        <td className="col-sm-2">{props.propFromParent[key].Name}</td>
        <td className="col-sm-2">{props.propFromParent[key].City}</td>
        <td className="col-sm-2">{props.propFromParent[key].Id}</td>
      </tr>
    )
  })
}
</tbody>

должно быть изменено на это:

<tbody>
  <tr className="row">
    <td className="col-sm-2">{props.propFromParent.Name}</td>
    <td className="col-sm-2">{props.propFromParent.City}</td>
    <td className="col-sm-2">{props.propFromParent.ID}</td>
  </tr>
</tbody>

Это исправит таблицу во вложенном аккордеоне, но, тем не менее, у вас будет два компонента аккордеона в строке(таким образом, у вас всегда будет по одной строке на таблицу для каждого аккордеона (при построении макета)).

РЕДАКТИРОВАТЬ 3:

В результате вы должны избавиться отсначала итерации и просто передать весь массив в компонент Child Accordion, как <ChildAccordion1 myObj={myObj} />, а затем просто итерации в InnerMostChildComp с

<tbody>
{
  props.propFromParent.myObj.map(item => {
    return (
      <tr className="row">
        <td className="col-sm-2">{item.Name}</td>
        <td className="col-sm-2">{item.City}</td>
        <td className="col-sm-2">{item.ID}</td>
      </tr>
    )
  })
}
</tbod