在 ReactJS 中映射 json 数据答案

【问题标题】：Mapping json data in ReactJS在 ReactJS 中映射 json 数据
【发布时间】：2017-11-17 22:01:10
【问题描述】：

我很难将数据子项映射到表。您在下面的 json 数据中看到的是一个项目的示例。我在卡片组件中有一个地图（请参阅渲染功能内容），以显示我在 MaterialUI 卡片中独立拥有的项目。每张牌也有一张桌子。我正在将表格内容与每个项目中的子项（行）进行映射。因为不是每个项目都有相同数量的数据或相同的数据。

图片、页面和部分都很好地填充了我的卡片。但是我的行内容没有填充到表格行（TableRowColumn）中

这是一个简化的json：

exports.administration = [
    {
        id:'1',
        image: '/assets/images/media/christopher-walken.jpg',
        page: '',
        section: 'Test one',
        rows: [
            {
                id:'1.1',
                type: 'STRING',
                name: 'Page1Var1',
                description:'n/a',
                show:'Both',
                label: 'Page1Var1',
                value: 'Test one',
                presentation: 'n/a',
                lines: '1',
                characters: '4096',
            },
        ],

    },
]

数据库声明和调用

const TEMPLATEITEMS = require('data/templates.js');
const administrationData = TEMPLATEITEMS['administration'];

在我的渲染函数中：

{administrationData.map((row, index) => (
    <Card key={index}>
        <CardText>
            <div> 
                 //these are working fine
                 <h4>{row.page} / {row.section}</h4> 
                 <img src={row.image} alt={row.name} /> 
            </div> 
            <Table>
                <TableBody>
                    //these are not working. I tried several variations as you see below
                    <TableRow id={row.rows.id}>
                        <TableRowColumn> {row.type} </TableRowColumn>
                        <TableRowColumn> {row[index].rows.name} </TableRowColumn>
                        ...
                        <TableRowColumn> {rows.characters} </TableRowColumn>
                    </TableRow>
                </TableBody>
            </Table>
        </CardText>
    </Card>         
))}

提前谢谢你们！

【问题讨论】：

标签： json reactjs

【解决方案1】：

{administrationData.map((row, index) => (
    <Card key={index}>
    <CardText>
        <div>
             <h4>{row.page} / {row.section}</h4> 
             <img style={styles.image} src={row.image} alt={row.name} /> 
        </div> 
        <Table>
            <TableBody>
                {
                    row.rows.map((item, itemIndex)=>{
                       return(
                           <TableRow id={item.rows.id} index={itemIndex}>
                               <TableRowColumn> {item.type} </TableRowColumn>
                               <TableRowColumn> {item.name}</TableRowColumn>
                               ...
                               <TableRowColumn> {item.characters}</TableRowColumn>
                           </TableRow>
                       );
                    })
                } 
            </TableBody>
        </Table>
    </CardText>
  </Card>         
))}

【讨论】：

不错！这一项与您在答案中未提及的另一项修改一起使用，但很容易弄清楚。这些项目必须使用item 而不是row。所以这个{item.type} 而不是{row.type}
有些困惑，伙计
是的，为了保持整洁，我也对其进行了编辑，以便遇到此答案的其他人也可以理解它。非常感谢人

【解决方案2】：

const tableRows = (row) => (
 row.rows.map((r, ix) => <TableRow id={r.id}>
    <TableRowColumn> {r.type} </TableRowColumn>
    <TableRowColumn> {r.name} </TableRowColumn>
    <TableRowColumn> {r.characters} </TableRowColumn>
    </TableRow>
    )
)

然后：

<TableBody> {tableRows(row)} </TableBody>

未经测试，但希望不会太远。

【讨论】：

它不是太远，但它不起作用，因为行在映射它的父级之外是未定义的。但我确实喜欢你的 const 隔离
它实际上与建议的答案相同，但没有嵌入它。我觉得我的命名也有点不对劲！
我最终按照您在此处提出的建议将其隔离。所以从本质上讲，这应该是公认的答案，但我已经把它交给了其他人，他给出了一个完整的工作解决方案，我觉得从他那里拿走它很糟糕。此外，他可以使用代表点；）我相信其他访问者会相信您的回答谢谢 Ric！
哈哈！没关系，这不是所有关于积分，而是帮助。很好，你成功了。