如何在列表项文本中显示数组元素答案

【问题标题】：How to show array elements in List Item Text如何在列表项文本中显示数组元素
【发布时间】：2020-06-08 03:13:08
【问题描述】：

我是新来的反应。我正在使用 ListIemText 在屏幕中显示值。我的问题是如何使用列表项文本在列表中显示数组的所有元素。

这里是代码。 Kpi_Before 是数组元素。

<MuiThemeProvider theme={theme}>
    <React.Fragment>
        <AppBar size>Confirm Information</AppBar>
        <br />
        <br />
        <List>
            <ListItemText primary="Title" secondary={Title} />
            <ListItemText
                primary="Details of Best Practice"
                secondary={Details}
            />
            <ListItemText
                primary="What is the Best Practice"
                secondary={What}
            />
            <ListItemText
                primary="Why was the Best Practice Implemented"
                secondary={Why}
            />
            <ListItemText
                primary="How was the Best Practice Implemented"
                secondary={How}
            />
            <ListItemText primary="Implementation Status" secondary={Status} />
            <ListItemText primary="Cost of Implementation" secondary={Cost} />
            <ListItemText
                primary="Benefits of the Best Practice"
                secondary={Benefits}
            />

            <ListItemText
                primary="Time taken for Implementation"
                secondary={Time}
            />

            <ListItemText
                key={idx}
                primary="KPI Before Implementation"
                secondary={Kpi_Before}
            />

            <ListItemText primary="UOM_Before" secondary={UOM_Before} />
            <ListItemText primary="Base_Before" secondary={Base_Before} />
            <ListItemText primary="Base_Before" secondary={Target_Before} />
            <ListItemText primary="Target Date" secondary={dateTime} />
        </List>

    </React.Fragment>
</MuiThemeProvider>

【问题讨论】：

标签： javascript reactjs react-redux rxjs material-ui

【解决方案1】：

如果我理解你想要什么。你可以这样做：

<div>
    <ul>{Kpi_Before.map(item => <li key={item}> {item} </li>)}</ul>
</div>

这将遍历 Kpi_Before 数组。在 React 中使用 .map 时，您应该为每个项目都有一个键，以便您需要引用它以使用 .filter 或其他方法将其删除，React 可以找到它。如果由于某种原因您在数组中有相等的值，您可以这样做：

<div>
    <ul>{Kpi_Before.map(item => <li key=Date.now()> {item} </li>)}</ul>
</div>

【讨论】：