我是新手做出反应并且在从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;
答案 0 :(得分:0)
在sortBy
函数中,您正在使用tableData
,而不会将其从状态
sortBy(sort_attr) {
const {tableData} = this.state;
this.setState({
tableData: tableData.sort('ascending')
});
}
但是,由于您要根据currentState
更新prevState
,因此您应该使用functional setState
sortBy(sort_attr) {
this.setState(prevState => ({
tableData: prevState.tableData.sort('ascending')
}));
}
的更多信息,请查看此问题