Question

我正在尝试通过道具发送数据。根据浏览器开发工具，我正在成功发送数据。但是，我无法在子组件中使用该数据。

所以：

我有一个名为“计算器”的组件，该组件将“卡路里”的值向下发送到名为“表”的组件。计算器组件具有一个类，但表组件只是创建和显示表的无状态组件。目前它显示正常，我可以输入静态数据以显示它，但我需要它来显示道具数据。

this.props.calories，props.calories等将无法使用...对此this.props.calories的错误读数显示“无法读取未定义的属性'props'”（我相信是因为这是一个无类/无状态组件？）并使用props.calories只会导致“无法编译，props未定义”。

我在浏览器中看到道具数据已传递到组件。我在世界上如何利用它？

编辑：这是在反应。

edit 2：Ive附加了浏览器控制台的屏幕截图，显示该组件确实具有可用数据。我只是不确定如何访问它。我还附有表格组件的代码。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Paper from '@material-ui/core/Paper';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TablePagination from '@material-ui/core/TablePagination';
import TableRow from '@material-ui/core/TableRow';



const columns = [
  { id: 'name', label: 'Item', minWidth: 170 },
  { id: 'code', label: 'Calories', minWidth: 100 },
  {
    id: 'population',
    label: 'Protein',
    minWidth: 170,
    align: 'right',
    format: value => value.toLocaleString(),
  },
  {
    id: 'size',
    label: 'Sodium',
    minWidth: 170,
    align: 'right',
    format: value => value.toLocaleString(),
  },
  {
    id: 'density',
    label: 'Trans Fats',
    minWidth: 170,
    align: 'right',
    format: value => value.toFixed(2),
  },
];

function createData(name, code, population, size) {
  const density = population / size;
  return { name, code, population, size, density };
}

const useStyles = makeStyles({
  root: {
    width: '100%',
  },
  tableWrapper: {
    maxHeight: 440,
    overflow: 'auto',
  },
});

export default function StickyHeadTable() {
  const classes = useStyles();
  const [page, setPage] = React.useState(0);
  const [rowsPerPage, setRowsPerPage] = React.useState(10);

  const rows = [
    createData('India', 'IN', 11111, 3287263),
    createData('China', 'CN', 1403500365, 9596961),
    createData('Italy', 'IT', 60483973, 301340),
    createData('United States', 'US', 327167434, 9833520),

  ];


  const handleChangePage = (event, newPage) => {
    setPage(newPage);
  };

  const handleChangeRowsPerPage = event => {
    setRowsPerPage(+event.target.value);
    setPage(0);
  };



  return (
    <Paper className={classes.root}>
      <div className={classes.tableWrapper}>
        <Table stickyHeader aria-label="sticky table">
          <TableHead>
            <TableRow>
              {columns.map(column => (
                <TableCell
                  key={column.id}
                  align={column.align}
                  style={{ minWidth: column.minWidth }}
                >
                  {column.label}
                </TableCell>
              ))}
            </TableRow>
          </TableHead>
          <TableBody>
            {rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map(row => {
              return (
                <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
                  {columns.map(column => {
                    const value = row[column.id];
                    return (
                      <TableCell key={column.id} align={column.align}>
                        {column.format && typeof value === 'number' ? column.format(value) : value}
                      </TableCell>
                    );
                  })}
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </div>
      <TablePagination
        rowsPerPageOptions={[10, 25, 100]}
        component="div"
        count={rows.length}
        rowsPerPage={rowsPerPage}
        page={page}
        onChangePage={handleChangePage}
        onChangeRowsPerPage={handleChangeRowsPerPage}
      />
    </Paper>
  );
}

props in browser

Answer 1

@KleinBottleCode 您可以共享两个类的屏幕截图吗？道具在发送给孩子时可以访问，需要查看孩子的组成部分和通过道具的声明。

将道具传递给无状态子组件

1 个答案: