Javascript 如何在React JS中迭代作为道具从其父对象接收的所有对象

我在用手风琴。我想用从父组件作为道具接收的数据填充最里面的子组件

为此，我在各自的组件中进行了如下操作：

父组件-

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

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

从“React”导入React；
从“react dom”导入react dom；
从“/ChildAccordion1”导入ChildAccordion1
进口{
手风琴，
手风琴项目，
手风琴项目名称，
手风琴体，
}来自“手风琴”；
导入“react-accessible-accordion/dist/fancy-example.css”；
导入“react-accessible-accordion/dist/minimal-example.css”；
类ParentAccordion扩展了React.Component{
getMappedData=（）=>{
常数myObj=[
{“姓名”：“约翰·多伊”，“城市”：“芝加哥”，“身份证”：1，“地址”：“207米尔斯镇”}，
{“姓名”：“Ramph Brown”，“城市”：“LA”，“ID”：2，“地址”：“508米尔斯镇”}
];
if（myObj）{
返回myObj.map（项=>{
控制台日志（项目）；
返回(
)
})
}
否则{
返回“”；
}
}
render（）{
返回(
//渲染组件
{this.getMappedData（）}
);
}
}
导出默认父级手风琴

在这里，如果您看到我只将项目作为道具传递给我的子组件，即仅对象

子组件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

从“React”导入React；
从“react dom”导入react dom；
从“./InnerMostChildComp”导入InnerMostChildComp
进口{
手风琴，
手风琴项目，
手风琴项目名称，
手风琴体，
}来自“手风琴”；
导入“react-accessible-accordion/dist/fancy-example.css”；
导入“react-accessible-accordion/dist/minimal-example.css”；
类ChildAccordion1扩展了React.Component{
render（）{
const propToChild=this.props；
返回(
//渲染组件
名称
城市
名称
城市
);
}
}
导出默认的ChildAccordion1

最里面的子组件-

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

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

从“React”导入React；
从“react dom”导入react dom；
进口{
手风琴，
手风琴项目，
手风琴项目名称，
手风琴体，
}来自“手风琴”；
导入“react-accessible-accordion/dist/fancy-example.css”；
导入“react-accessible-accordion/dist/minimal-example.css”；
const InnerMostChildComp=（道具）=>{
返回(
列表
名称
城市
身份证件
{
Object.keys（props.propFromParent）.map（（键，索引）=>{
console.log（键、索引）；
返回(
{props.propFromParent[key].Name}
{props.propFromParent[key].City}
{props.propFromParent[key].Id}
)
})
}  
)
};
导出默认InnerMostChildComp

我希望每个

tr

都具有从对象索引中选择的属性。为此，我使用

Object.keys

，因为我们在child中获得的道具始终是一个组件

我面临的问题是，在我的InnerMostChildComp中，在我的props.propsfromParent中，我得到数组的第一个对象，即与ID 1相关的对象，然后当我将调试器放在td上时，它似乎不是遍历数组中的对象数（2），而是遍历所有单个属性（键和值）我的第一个对象，它打印所有的键和值。然后，该控件再次返回到props.propsfromParent，其中显示第二个对象，并再次在同一对象内对键和值进行迭代，这不是我想要的。例如，当我调试InnerMostChildComp时，Object.keys迭代第一个对象的每个属性，而不是迭代两个对象。My props.propFromParent在第一个对象的迭代完成后显示第二个对象。可能我没有正确使用object.keys，或者问题出在我的props.propFromParent上。

编辑： 很难理解您想要在结果中得到什么，因此为了保持简单，您的表（大概）应该如下所示：

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>

应改为：

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

---

嗯，只有一个

propFromParent

被索引。但是

map

函数的第一个参数是对象，而不是索引（

index

是第二个参数，集合是第三个参数）。它也不是一个非常有用的属性名。此外，只有first

td

使用

[index].key1

而在其他

td

s上则只

key2

等等。@extemp是的，我尝试了这两种方法，但都不起作用，所以在tr中添加了这两种方法以供参考。@DaveNewton属性名我为dummy添加了jus。是的，只有一种propFromParent被索引。我正试图修复它，但不知道如何修复