sortBy 函数的错误是啥

Posted 2023-02-21

【中文标题】sortBy 函数的错误是啥

【英文标题】：What is the error in sortBy functionsortBy 函数的错误是什么

【发布时间】：2018-08-29 00:53:55

【问题描述】：

我是新来的反应，并且在从 json 对象重新生成的反应中对数据表进行排序时遇到问题。 我已经正确渲染了数据表，但是当我尝试在单元格组件上使用 onClick 对数据表进行排序时，错误提示 "./src/App.js 第 34 行：'tableData' 未定义 no-undef"。

请指出我犯了什么错误。源代码是：

  import React from 'react';
  import axios from 'axios';
  import Table, Column, Cell from 'fixed-data-table-2';
  import 'fixed-data-table-2/dist/fixed-data-table.css';

  class App extends React.Component 
    constructor (props) 
      super(props);
      this.state =  tableData : [];
      this.sortBy = this.sortBy.bind(this);
    

    sortBy(sort_attr) 
      this.setState(
          tableData: tableData.sort('ascending')
          );
      


  componentDidMount() 
      axios.get('https://drupal8.sample.com/my-api/get.json', 
            responseType: 'json'
        ).then(response => 
            this.setState( tableData: response.data );
            console.log(this.state.tableData);
        );
      


    render() 
      const rows = this.state.tableData;
      return (
        <Table
        rowHeight=50
        rowsCount=rows.length
        width=500
        height=500
        headerHeight=50>
        <Column
      header=<Cell onClick= this.sortBy>resourceID</Cell>
      columnKey="resourceID"
      cell=( rowIndex, columnKey, ...props ) =>
        <Cell ...props>
          rows[rowIndex][columnKey]
        </Cell>
      width=200
    />
      <Column
      header=<Cell>resourceType</Cell>
      columnKey="resourceType"
      cell=( rowIndex, columnKey, ...props ) =>
        <Cell ...props>
          rows[rowIndex][columnKey]
        </Cell>
      width=200
    />
        <Column
      header=<Cell>tenantName</Cell>
      columnKey="tenantName"
      cell=( rowIndex, columnKey, ...props ) =>
        <Cell ...props>
          rows[rowIndex][columnKey]
        </Cell>
      width=200
    />
      </Table>
      );
    
  

  export default App;

【参考方案1】：

在您的 sortBy 函数中，您正在使用 tableData 而不会从状态中解构它

sortBy(sort_attr) 
  const tableData = this.state;
  this.setState(
      tableData: tableData.sort('ascending')
      );
  

不过既然你是在prevState的基础上更新currentState，你应该像functional setState一样使用

sortBy(sort_attr) 
  this.setState(prevState => (
      tableData: prevState.tableData.sort('ascending')
      ));
  

查看此问题以获取有关 when to use functional setState 的更多信息