Question

我正在react工作，并尝试为此Web应用程序构建一个显示数据的页面。
我什至无法获取它来显示此页面的数据。

我需要提取的代码来自Web链接，我需要将其提取并显示在具有实质性UI的卡片上。

import React, { Component } from 'react';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';

const STYLES = {
    card: {
      minWidth: 275,
    },
    //bullet: {
      //display: 'inline-block',
      //margin: '0 2px',
      //transform: 'scale(0.8)',
    //},
    //title: {
      //marginBottom: 16,
      //fontSize: 14,
    //},
    //pos: {
     // marginBottom: 12,
    //},
  };

class ErrorView extends Component{

    constructor(props) {
        super(props);
        this.extractErrorData = this.extractErrorData.bind(this)
    }
    extractErrorData(errorDatas) {
        return errorDatas.map((errorViewData) => {
            <Card>
                <CardContent>
                    {'errorData.project'}
                </CardContent>
                <CardContent>
                    {'errorData.errorText'}
                </CardContent>
            </Card>

        })
    }

     render() {
        const { header, errorViewData } = this.props;
        return (
            <Paper elevation={4} Color='#fff'>
                <Typography variant="headline" component="h3">
                    {header}
                </Typography>
                {this.extractErrorData(errorViewData)}
            </Paper>
         );
    }
}
ErrorView = {
    classes: PropTypes.object.isRequired,
  };

 export default withStyles(STYLES)(ErrorView);

Answer 1

如果要显示errorData.project和errorData.errorText值（并使用errorViewData重命名errorData），请删除extractErrorData中的单引号：

extractErrorData(errorDatas) {
    return errorDatas.map((errorViewData) => {
        <Card>
            <CardContent>
                {errorViewData.project}
            </CardContent>
            <CardContent>
                {errorViewData.errorText}
            </CardContent>
        </Card>

    })
}

注意：您应该添加JSFiddle或编写更多内容，以便我们更好地了解问题所在。

提取数据并在反应中显示

1 个答案: