Question

我正在尝试在表中为我的应用程序显示数组数据。每当我引用表单元格中的数据时，所有列都会返回相同的元素。我想在每一列中显示每个日期。

我的桌子：

function SomeComponenet(props) {
  return (
    <React.Fragment>
      {props.attendence.map.forEach((attendence, index) => {
        return (
          <Paper>
            <Table aria-label="simple table">
              <TableHead>
                <TableRow>
                  <TableCell>Name</TableCell>

                  <TableCell align="right">
                    {attendence.Attendence[index].date}
                  </TableCell>
                  <TableCell align="right">
                    {attendence.Attendence[index].date}
                  </TableCell>
                  <TableCell align="right">
                    {attendence.Attendence[index].date}
                  </TableCell>
                  <TableCell align="right">
                    {attendence.Attendence[index].date}
                  </TableCell>
                  <TableCell align="right">
                    {attendence.Attendence[index].date}
                  </TableCell>
                </TableRow>
              </TableHead>
            </Table>
          </Paper>
        );
      })}
    </React.Fragment>
  );
}

我的数据：

const fakeData = [
  {
    Name: "A Person",
    Attendence: [
      {
        date: "2019/12/01",
        attendence: 1
      },
      {
        date: "2019/12/02",
        attendence: 1
      },
      {
        date: "2019/12/03",
        attendence: 1
      }
    ]
  }
];

Answer 1

那是因为在topper映射的一次迭代中所有索引都是相同的。您不能以这种方式在地图上使用forEach。

您可以删除forEach并在出勤率上做另外一张地图。像这样的东西：

function SomeComponenet(props) {
  return (
    <React.Fragment>
    {props.attendence.map((attendence, index) =>{
        {console.log(attendence.Attendence)}
        return( 
        <Paper >
          <Table aria-label="simple table">
            <TableHead>
              <TableRow>
                <TableCell>Name</TableCell>
                {attendence.Attendence.map( newAttendence => {
                 return(
                <TableCell align="right">
                   {newAttendence.date}
                </TableCell>
               )
               })}

              </TableRow>
            </TableHead>
           </Table>
       </Paper>
            );
        })}
    </ReactFragment>
    );
}

Answer 2

您需要在{props.attendence.map}内放置另一张地图

链接到codeandbox https://codesandbox.io/s/sad-grass-sg5hr

import React, { Fragment } from "react";
import { Table } from "reactstrap";

function Test() {
  const attendence = [
    {
      Name: "A Person",
      Attendence: [
        {
          date: "2019/12/01",
          attendence: 1
        },
        {
          date: "2019/12/02",
          attendence: 1
        },
        {
          date: "2019/12/03",
          attendence: 1
        }
      ]
    }
  ];

  return (
    <Fragment>
      {attendence.map(person => {
        return (
          <Table>
            <thead>
              <tr>
                <th>Name</th>
                {person.Attendence.map(personAttendendance => {
                  return <th>{personAttendendance.date}</th>;
                })}
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>{person.Name}</td>
                {person.Attendence.map(personAttendendance => {
                  return <td>{personAttendendance.attendence}</td>;
                })}
              </tr>
            </tbody>
          </Table>
        );
      })}
    </Fragment>
  );
}

export default Test;

通过反应表中的映射显示数组数据

2 个答案: