Question

我很难将数据子映射到表中。您在我的json数据中看到的是一个项目的示例。我在Card组件中有一张地图（请参阅渲染功能内容），以便在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>         
))}

先谢谢你们！

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

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

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

在ReactJS中映射json数据

2 个答案: