Question

我绝对是React.js的初学者。我检查了类似的问题并应用了其中的一些问题，但仍然无法解决问题。我在下面添加了.js文件。我使用Django REST API从SQLite获取数据，然后尝试将数据放入表中。 GET请求为我提供了一个JSON文件，我尝试将其转换为合适的数据格式。

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {makeStyles} from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import Collapse from '@material-ui/core/Collapse';
import IconButton from '@material-ui/core/IconButton';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableContainer from '@material-ui/core/TableContainer';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@material-ui/icons/KeyboardArrowUp';

const useRowStyles = makeStyles({
  root: {
    '& > *': {
      borderBottom: 'unset',
    },
  },
});

function createData(name, mail, mss) {
  return {
    name,
    mail,
    history: [
      { massage: mss},
    ],
  };
}

function Row(props) {
  const { row } = props;
  const [open, setOpen] = React.useState(false);
  const classes = useRowStyles();

  return (
    <React.Fragment>
      <TableRow className={classes.root}>
        <TableCell>
          <IconButton aria-label="expand row" size="small" onClick={() => setOpen(!open)}>
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <TableCell component="th" scope="row">
          {row.name}
        </TableCell>
        <TableCell align="right">{row.mail}</TableCell>
      </TableRow>
      <TableRow>
        <TableCell style={{ paddingBottom: 0, paddingTop: 0 }} colSpan={6}>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <Box margin={1}>
              <Typography variant="h6" gutterBottom component="div">
                History
              </Typography>
              <Table size="small" aria-label="purchases">
                <TableHead>
                  <TableRow>
                    <TableCell>İçerik</TableCell>

                  </TableRow>
                </TableHead>
                <TableBody>
                  {row.history.map((historyRow) => (
                    <TableRow key={historyRow.massage}>
                      <TableCell component="th" scope="row">
                        {historyRow.massage}
                      </TableCell>

                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </Box>
          </Collapse>
        </TableCell>
      </TableRow>
    </React.Fragment>
  );
}

Row.propTypes = {
  row: PropTypes.shape({
    name: PropTypes.string.isRequired,
    mail: PropTypes.string.isRequired,
    history: PropTypes.arrayOf(
      PropTypes.shape({
        message: PropTypes.string.isRequired,
      }),
    ).isRequired,
  }).isRequired,
};


function CollapsibleTable(rows) {
  return (
    <TableContainer component={Paper}>
      <Table aria-label="collapsible table">
        <TableHead>
          <TableRow>
            <TableCell />
            <TableCell>Name</TableCell>
            <TableCell align="right">Mail</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <Row key={row.name} row={row} />
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

const rows = [
  createData('Frozen yoghurt', "metegenez", "selam"),
  createData('Ice cream sandwich', "metegenez", "selam"),
  createData('Eclair', "metegenez", "selam"),
  createData('Cupcake', "metegenez", "selam"),
  createData('Gingerbread', "metegenez", "selam")];

function mapDatasInto() {
    return (
        this.state.data.map(contact => {
          return (
              createData(contact)
          );
        })
    );
  }

class Tablee extends Component {

  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false,
      placeholder: "Loading"
    };
    this.componentDidMount = this.componentDidMount.bind(this);
    this.mapDatasInto = this.mapDatasInto.bind(this);
  }


  componentDidMount() {
    fetch("api/lead")
        .then(response => {
          if (response.status > 400) {
            return this.setState(() => {
              return {placeholder: "Something went wrong!"};
            });
          }
          console.log(response);
          return response.json();
        })
        .then(data => {
          this.setState(() => {
            return {
              data,
              loaded: true
            };
          });
        });


  }
  mapDatasInto() {
    return (
        this.state.data.map(contact => {
          return (
              createData(contact)
          );
        })
    );
  }

  render() {
    return (CollapsibleTable(mapDatasInto()));
  }
}
export default Tablee;

我使用行进行调试，但是当我在状态下使用数据时，会出现这样的错误。我相信对此有一个简单的解释。

Uncaught TypeError: Cannot read property 'state' of undefined
    at mapDatasInto (Table.js:181)
    at Tablee.render (Table.js:242)
    at finishClassComponent (react-dom.development.js:17160)
    at updateClassComponent (react-dom.development.js:17110)
    at beginWork (react-dom.development.js:18620)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)

Answer 1

我认为componentDidMount中的fetch（'api / lead'）不会返回您要查找的数据。您可以在componentDidMount中尝试console.data，只是看看是否已加载数据吗？如果有数据，则意味着setState出错

Uncaught TypeError：无法读取未定义的属性“ state”-React.js

1 个答案: