时间戳

首页 > 解决方案 > 如何在 React JS 中迭代从其父级作为道具接收的所有对象

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

问题描述

我正在使用 react-accessible-accordion。我想用从父组件作为道具接收的数据填充最里面的子组件。

为此，我在各自的组件中执行以下操作：

父组件——</p> 

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 —</p> 

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 子组件 —</p> 

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 确实显示了第二个对象。

标签： javascriptreactjsecmascript-6

解决方案

编辑： 很难理解你想在结果中得到什么，所以为了简单起见，你的表（大概）应该如下所示：

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} />中，然后在InnerMostChildCompwith中迭代它

<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

推荐阅读