Reactjs 获取表中对象数组的状态

Reactjs 获取表中对象数组的状态,reactjs,react-table-v7,Reactjs,React Table V7,我使用react表来呈现一组数据。我从外部文件调用列映射。我想用专门的数据格式化一些单元格(例如,在一个单元格中连接两组数据),但在一个简单的对象数组中无法这样做。这是我的js文件: import React, { useEffect, useMemo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import Moment from 'react-moment'; import { useTabl

我使用react表来呈现一组数据。我从外部文件调用列映射。我想用专门的数据格式化一些单元格(例如,在一个单元格中连接两组数据),但在一个简单的对象数组中无法这样做。这是我的js文件:

import React, { useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Moment from 'react-moment';
import { useTable } from 'react-table';
import { Table } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { MY_PROJECT_COLUMNS } from '../columns/columns';
import { projectsDetails } from '../actions/projectActions';

import Button from '../components/Button';

const ProjectSummary = () => {
  const dispatch = useDispatch();

  const projectDetails = useSelector(state => state.projectDetails);
  const { loading, error, projects } = projectDetails;

  useEffect(() => {
    dispatch(projectsDetails());
  }, [dispatch]);

  const columns = useMemo(() => MY_PROJECT_COLUMNS, []);
  const data = useMemo(() => projects, []);

  console.log(data);

  const tableInstance = useTable({
    columns,
    data
  });

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = tableInstance;

  return (
    <Table striped {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map(row => {
          prepareRow(row);
          return (
            <tr {...row.getRowProps()}>
              {row.cells.map(cell => {
                return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </Table>
  );
};

export default ProjectSummary;

提前谢谢你

很难理解你在问什么。如果您想要连接两组数据,那么您需要在更高的级别上进行连接,并将其作为数据属性传递到react表中。如果您想要组合两个不同的属性,即在一列中使用2个访问器而不是1个,那么我认为您无法做到这一点,需要在更高的级别上完成。但是,您可以通过使用Cell:props=>props.row.original来访问所有行数据
export const MY_PROJECT_COLUMNS = [
  {
    Header: 'Status',
    accessor: 'status'
  },
  {
    Header: 'Name',
    accessor: 'name'
  },
  {
    Header: 'Funding Source',
    accessor: 'fundingSource'
  },
  {
    Header: 'Project Id',
    accessor: 'projectId'
  },
  {
    Header: 'Start Date',
    accessor: 'startDate'
  },
  {
    Header: 'End Date',
    accessor: 'endDate'
  },
  {
    Header: 'Type',
    accessor: 'type'
  },
  {
    Header: 'Location',
    accessor: 'state'
  }
];