Question

loadash的orderBy方法出现错误。 _.sortBy()方法正常运行。调用_.orderBy方法时，将产生错误"_lodash2.default.orderBy is not a function"。我需要按onClick()升序和降序对表格进行排序。

import React, { Component } from 'react';
import Link from '@material-ui/core/Link';
import { makeStyles } from '@material-ui/styles';
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 TableRow from '@material-ui/core/TableRow';
import Title from './Title';
import { withStyles } from '@material-ui/core';
import _ from 'lodash';
const invertDirection ={
  asc:'desc',
  desc:'asc'
}
const useStyles = theme => ({
  seeMore: {
    marginTop: theme.spacing(3),
  },
});

class ListingView extends Component {
  constructor(props) {
    super(props)
    this.state = {
      rows: [],
      index:0,
      corporations:this.props.corporations,
      columnToSort:'',
      sortDirection:'desc',
    }
  }
  setRows = (column) => {
    this.state.rows.push(column)
  }
  handleSort=(columnName)=>{
    // this.setState(state=>({
    //   columnToSort: columnName,
    //   sortDirection: state.columnToSort===columnName
    //   ? invertDirection[state.columnToSort]
    //   : 'asc'
    // }));
    console.log(this.state.columnToSort);
    console.log(this.state.sortDirection);
    var corp=_.orderBy(this.state.corporations,['corp_code'],['asc']);

   // var corp =_.sortBy(this.state.corporations,'corp_code');
    console.log("corporations")
    console.log(corp);
    //this.setState({corporations:orderBy(this.state.corporations,this.state.columnToSort,this.state.sortDirection)})

  }

render() {
  console.log(this.state.corporations);

  const classes = useStyles;
  return (
    <React.Fragment>
      <Title>List</Title>
      <Table size="small">
        <TableHead>
          <TableRow>
          {this.props.tableHeaders.map((header, key) =>
          <TableCell  onClick={() => this.handleSort(header.heading)} key={key} onLoad={this.setRows(header.column)} >{header.heading}</TableCell>)}
            <TableCell>ACTION</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {this.state.corporations.map((corp, key) =>
            <TableRow key={key}>
              {this.state.rows.map((row, key) =>
                <TableCell key={key} >
                  {corp[row]}
                </TableCell>
              )}
              <TableCell>
                E D
               </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
      <div className={classes.seeMore}>
        <Link color="primary" href="javascript:;">
          See more orders
        </Link>
      </div>
    </React.Fragment>
  );
}
}


export default withStyles(useStyles)(ListingView);

Answer 1

几个可能不相关的问题，但是请解决它们并查看

  setRows = (column) => {
    this.state.rows.push(column)
  }

确实应该是（因为您不应该直接改变状态）

setRows = (column) => {
  this.setState((state) => ({
    rows: [...state.rows, column]
  }));
}

和

onLoad={this.setRows(header.column)}

应该是

onLoad={() => this.setRows(header.column)}

尝试对数据进行排序时，获取_lodash2.default.orderBy不是函数

1 个答案: