javascript - 在 react 模板中提取对象数组中的对象项

Question

我是 React 和 JavaScript 的新手。我尝试在 react 模板中使用以下数据。它们是对象数组，所以我希望该对象数组中的每个项目都在 HTML( react 模板)中单独打印。任何人都可以帮助我，我有下面的代码，请帮助:

const fakeData = [
  {
    MOP: 'MOP',
    code: '#1180-xxxx',
    date: '10-08-2018',
    status: 'Pending Order',
  },
  {
    MOP: 'MOP1',
    code: '#1180-xxxx1',
    date: '11-08-2018',
    status: 'Pending Order',
  },
  {
    MOP: 'MOP2',
    code: '#1180-xxxx2',
    date: '12-08-2018',
    status: 'Pending Order',
  },
];

export class TransactionPage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { fakeData };
  }

  render() {
    const { classes, intl } = this.props;
    return (
      <Page>
        <Helmet>
          <title>{intl.formatMessage({ ...messages.header })}</title>
          <meta
            name="description"
            content={<FormattedMessage {...messages.meta} />}
          />
        </Helmet>
        <PageContent>
          <Paper>
            <Grid container>
              <Grid item xs={12} sm={5} md={4} lg={3}>
                <List className={classes.list} disablePadding>
                  // show the item here
                </List>
              </Grid>

              <Hidden xsDown>
                <Grid item sm={7} md={8} lg={9}>
                  <Grid
                    container
                    direction="column"
                    spacing={16}
                    className={classes.details}
                  >
                    <Grid item xs={12} className={classes.center} />
                    <Grid item xs={12}>
                      <Typography variant="h6">CREDIT DEBIT</Typography>
                    </Grid>
                    <Grid item xs={12}>
                      <Divider />
                    </Grid>
                    <Grid item xs={12} />
                  </Grid>
                </Grid>
              </Hidden>
            </Grid>
          </Paper>
        </PageContent>
      </Page>
    );
  }
}

TransactionPage.propTypes = {
  intl: PropTypes.object.isRequired,
  dispatch: PropTypes.func.isRequired,
};

const mapStateToProps = createStructuredSelector({
  TransactionPage: makeSelectTransactionPage(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'TransactionPage', reducer });
const withSaga = injectSaga({ key: 'TransactionPage', saga });

export default compose(
  withStyles(styles),
  injectIntl,
  withReducer,
  withSaga,
  withConnect,
)(TransactionPage);

我希望此代码转换为页面中下面的输出:

             <Grid container>
              <Grid item xs={12} sm={5} md={4} lg={3}>
                <List className={classes.list} disablePadding>

                  <ListItem button>
                    <span>MOP</span>
                    <span>#1180-xxxx</span>
                    <span>10-08-2018</span>
                    <span>Pending Order</span>
                    <ListItemSecondaryAction>
                      <ArrowIcon />
                    </ListItemSecondaryAction>
                  </ListItem>

                  <ListItem button>
                    <span>MOP1</span>
                    <span>#1180-xxxx1</span>
                    <span>11-08-2018</span>
                    <span>Pending Order</span>
                    <ListItemSecondaryAction>
                      <ArrowIcon />
                    </ListItemSecondaryAction>
                  </ListItem>

                  <ListItem button>
                    <span>MOP2</span>
                    <span>#1180-xxxx2</span>
                    <span>12-08-2018</span>
                    <span>Pending Order</span>
                    <ListItemSecondaryAction>
                      <ArrowIcon />
                    </ListItemSecondaryAction>
                  </ListItem>

                </List>
              </Grid>

我正在使用react，如何在react模板中循环它们。

Answer 1

您只需使用 JSX 创建 map 即可:

<List className={classes.list} disablePadding>
{fakeData.map((item, i) => <ListItem key={item.MOP+"_" + i} button>....</ListItem>) }
</List>