javascript - react 表: How do I total (sum) values to each of the holeOne thru holeNine and display the sum as a value in out: 41?

Question

尝试合计每个孔的值并在 out 中显示总计:

输出:S{holesSum}，

返回对象

export const data = [
  {
    id: 2,
    name: 'Tiger Woods',
    holeOne: 4,
    holeTwo: 5,
    holeThree: 4,
    holeFour: 5,
    holeFive: 5,
    holeSix: 4,
    holeSeven: 5,
    holeEight: 5,
    holeNine: 4,
    out: // want to sum to values of holeOne thru holeNine

  }
]


import ReactTable from 'react-table';
import React, { Component } from 'react';

import { data } from './data';

const columns = [
  {
    Header: 'Place',
    accessor: 'eventPosition',
    headerStyle: { whiteSpace: 'unset' },
    style: { whiteSpace: 'unset' },
    maxWidth: 60
  },
  {
    Header: 'Player',
    accessor: 'name',
    headerStyle: { whiteSpace: 'unset' },
    style: { whiteSpace: 'unset' },
    maxWidth: 200
  },
  {
    Header: '1',
    accessor: 'holeOne',
    headerStyle: { whiteSpace: 'unset' },
    style: { whiteSpace: 'unset' },
    maxWidth: 50
  },
  {
    Header: '2',
    accessor: 'holeTwo',
    headerStyle: { whiteSpace: 'unset' },
    style: { whiteSpace: 'unset' },
    maxWidth: 50
  },
  {
    Header: '3',
    accessor: 'holeThree',
    headerStyle: { whiteSpace: 'unset' },
    style: { whiteSpace: 'unset' },
    maxWidth: 50
  },
  {
    Header: '4',
    accessor: 'holeFour',
    headerStyle: { whiteSpace: 'unset' },
    style: { whiteSpace: 'unset' },
    maxWidth: 50
  },
  {
    Header: '5',
    accessor: 'holeFive',
    headerStyle: { whiteSpace: 'unset' },
    style: { whiteSpace: 'unset' },
    maxWidth: 50
  },
  {
    Header: '6',
    accessor: 'holeSix',
    headerStyle: { whiteSpace: 'unset' },
    style: { whiteSpace: 'unset' },
    maxWidth: 50
  },
  {
    Header: '7',
    accessor: 'holeSeven',
    headerStyle: { whiteSpace: 'unset' },
    style: { whiteSpace: 'unset' },
    maxWidth: 50
  },
  {
    Header: '8',
    accessor: 'holeEight',
    headerStyle: { whiteSpace: 'unset' },
    style: { whiteSpace: 'unset' },
    maxWidth: 50
  },
  {
    Header: '9',
    accessor: 'holeNine',
    headerStyle: { whiteSpace: 'unset' },
    style: { whiteSpace: 'unset' },
    maxWidth: 50
  },
  {
    Header: 'Out',
    accessor: 'out',
    headerStyle: { whiteSpace: 'unset' },
    style: { whiteSpace: 'unset' },
    maxWidth: 50
  }
];

export default class ReactTableComponent extends Component {
  render() {
    return (
      <div style={{ padding: '50px' }}>
        <ReactTable
          manual
          minRows={0}
          pageSize={1}
          data={data}
          columns={columns}
          pages={0}
          showPagination={true}
        />
      </div>
    );
  }
}


({holeOne}, ... {holeNine}).reduce

Answer 1

来自docs ，您可以自定义您的Cell。

{
    Header: 'Out',
    accessor: 'out',
    headerStyle: { whiteSpace: 'unset' },
    style: { whiteSpace: 'unset' },
    maxWidth: 50,
    Cell: row => {
      console.log(data);
      let columns_to_sum = ["holeOne","holeTwo" , "holeThree" , "holeFour" , "holeFive" , "holeSix" , "holeSeven" , "holeEight" , "holeNine"];
      let result = 0;
      Object.keys(data[row.index]).map(key =>{
        if(columns_to_sum.includes(key)){
          result += data[row.index][key]
        }
      })
      return result;
    }
}

Demo