异步获取数据不重新呈现 ReactJS 数据表(或只是不显示新数据)
Async fetch of data not rerendering ReactJS datatable(or just not displaying new data)
这里的问题是,如果我的新数据是从我的后端 (RestAPI) 获取的,数据 table 不会显示新数据,即使我调用了 this.setState 并且如果我登录在新状态下,获取的数据会记录到控制台,但不会显示在我的数据中table。
当我在构造函数 this.state = xxx 中硬编码数据时,数据显示得很好。所以我认为这必须与某些重新渲染问题有关?我调试了几个小时,但就是找不到问题所在。如果有人能在这里帮助我,那就太好了:)
我阅读了很多关于不重新渲染和 React 组件生命周期的文章和帖子。作为进一步的信息,当我在 return 值之前在渲染方法中记录状态时,它首先为空(因为我初始化了状态),并且在第二次渲染之后数据在 this.state 中。行数据根据需要。但是我就是不知道为什么它没有显示在数据中table.
constructor(props) {
super(props);
this.state = {
columnDefs: [{
headerName: "Dump Name", field: "dumpName", sortable: true, filter: true
}, {
headerName: "Type", field: "type", sortable: true, filter: true
}, {
headerName: "Size", field: "length", sortable: true, filter: true
}, {
headerName: "Different CAN-IDs", field: "canIdCount", sortable: true, filter: true
}, {
headerName: "Created At", field: "createdAt", sortable: true, filter: true
}],
rowData: null
}
}
componentDidMount = async () => {
let collectionData = [];
await getSniffs().then(function (sniffdata) {
sniffdata.map(async function (row) {
collectionData.push({
dumpName: row,
length: await getMessageCount(row).then(function (res) {
return res[0].all;
}),
canIdCount: await getIdCountDistinct(row).then(function (res) {
return res[0].count;
}),
createdAt: await getFirstTimestamp(row).then(function (res) {
return res[0].firstTimestamp;
}),
type: "CAN Message"
});
});
}).then(() => this.setState({
rowData: collectionData
}));
};
render() {
console.log(this.state);
return (
<div
className="ag-theme-material"
style={{
height: '500px',
width: '1000px' }}
>
<AgGridReact
// onRowClicked={this.onRowClicked.bind(this)}
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}>
</AgGridReact>
</div>
// : <Loading/>;
)}
}
export default withRouter(SniffOverviewDatatable);
数据table 仅显示:没有要显示的行。
起初我认为这是正确的结果,但它应该得到更新并显示我检索到的数据。
日志准确显示所需的数据和数组结构。
感谢您的宝贵时间,我真的希望得到一些提示:)
编辑:
嘿嘿,我只是重写了 componentDidMount 函数,但恐怕它并没有改变任何东西。数据已记录,但 table 未更新:/
这里是函数的新代码(使用async/await):
componentDidMount = async () => {
let rowData = [];
try {
const sniffs = await getSniffs();
sniffs.map(async function (row) {
const msgCount = await getMessageCount(row);
const idCount = await getIdCountDistinct(row);
const firstTimestamp = await getFirstTimestamp(row);
rowData.push({
dumpName: row,
length: msgCount[0].all,
canIdCount: idCount[0].count,
createdAt: firstTimestamp[0].firstTimestamp,
type: "CAN Message"
});
});
} catch (e) {
console.log(e);
}
this.setState({
rowData
});
};
您是否已经尝试过将 setState 与回调函数和某种不变性库(例如 immutability-helper)结合使用?这将导致这样的代码:
import update from 'immutability-helper';
...
this.setState(prevState => update(prevState, {rowData: {$set: collectionData}});
...
你好,如果有人看到这个问题,我只是想提供我自己的答案:
componentDidMount = async () => {
let fetched = await getSniffs();
let rowData = [];
for (const row of fetched.data) {
const msgCount = await getMessageCount(row);
const idCount = await getIdCountDistinct(row);
const firstTimestamp = await getFirstTimestamp(row);
rowData.push({
dumpName: row,
length: msgCount.data[0].all,
canIdCount: idCount.data[0].count,
createdAt: new Date(firstTimestamp.data[0].firstTimestamp),
type: "CAN Message"
});
}
this.setState({
rowData
});
};
这现在工作得很好 :) 我还在上面的一个组件中迁移了这个方法,所以数据表只是通过 props 而不是通过状态获取它的数据。
谢谢并关闭!
这里的问题是,如果我的新数据是从我的后端 (RestAPI) 获取的,数据 table 不会显示新数据,即使我调用了 this.setState 并且如果我登录在新状态下,获取的数据会记录到控制台,但不会显示在我的数据中table。 当我在构造函数 this.state = xxx 中硬编码数据时,数据显示得很好。所以我认为这必须与某些重新渲染问题有关?我调试了几个小时,但就是找不到问题所在。如果有人能在这里帮助我,那就太好了:)
我阅读了很多关于不重新渲染和 React 组件生命周期的文章和帖子。作为进一步的信息,当我在 return 值之前在渲染方法中记录状态时,它首先为空(因为我初始化了状态),并且在第二次渲染之后数据在 this.state 中。行数据根据需要。但是我就是不知道为什么它没有显示在数据中table.
constructor(props) {
super(props);
this.state = {
columnDefs: [{
headerName: "Dump Name", field: "dumpName", sortable: true, filter: true
}, {
headerName: "Type", field: "type", sortable: true, filter: true
}, {
headerName: "Size", field: "length", sortable: true, filter: true
}, {
headerName: "Different CAN-IDs", field: "canIdCount", sortable: true, filter: true
}, {
headerName: "Created At", field: "createdAt", sortable: true, filter: true
}],
rowData: null
}
}
componentDidMount = async () => {
let collectionData = [];
await getSniffs().then(function (sniffdata) {
sniffdata.map(async function (row) {
collectionData.push({
dumpName: row,
length: await getMessageCount(row).then(function (res) {
return res[0].all;
}),
canIdCount: await getIdCountDistinct(row).then(function (res) {
return res[0].count;
}),
createdAt: await getFirstTimestamp(row).then(function (res) {
return res[0].firstTimestamp;
}),
type: "CAN Message"
});
});
}).then(() => this.setState({
rowData: collectionData
}));
};
render() {
console.log(this.state);
return (
<div
className="ag-theme-material"
style={{
height: '500px',
width: '1000px' }}
>
<AgGridReact
// onRowClicked={this.onRowClicked.bind(this)}
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}>
</AgGridReact>
</div>
// : <Loading/>;
)}
}
export default withRouter(SniffOverviewDatatable);
数据table 仅显示:没有要显示的行。 起初我认为这是正确的结果,但它应该得到更新并显示我检索到的数据。 日志准确显示所需的数据和数组结构。
感谢您的宝贵时间,我真的希望得到一些提示:)
编辑: 嘿嘿,我只是重写了 componentDidMount 函数,但恐怕它并没有改变任何东西。数据已记录,但 table 未更新:/
这里是函数的新代码(使用async/await):
componentDidMount = async () => {
let rowData = [];
try {
const sniffs = await getSniffs();
sniffs.map(async function (row) {
const msgCount = await getMessageCount(row);
const idCount = await getIdCountDistinct(row);
const firstTimestamp = await getFirstTimestamp(row);
rowData.push({
dumpName: row,
length: msgCount[0].all,
canIdCount: idCount[0].count,
createdAt: firstTimestamp[0].firstTimestamp,
type: "CAN Message"
});
});
} catch (e) {
console.log(e);
}
this.setState({
rowData
});
};
您是否已经尝试过将 setState 与回调函数和某种不变性库(例如 immutability-helper)结合使用?这将导致这样的代码:
import update from 'immutability-helper';
...
this.setState(prevState => update(prevState, {rowData: {$set: collectionData}});
...
你好,如果有人看到这个问题,我只是想提供我自己的答案:
componentDidMount = async () => {
let fetched = await getSniffs();
let rowData = [];
for (const row of fetched.data) {
const msgCount = await getMessageCount(row);
const idCount = await getIdCountDistinct(row);
const firstTimestamp = await getFirstTimestamp(row);
rowData.push({
dumpName: row,
length: msgCount.data[0].all,
canIdCount: idCount.data[0].count,
createdAt: new Date(firstTimestamp.data[0].firstTimestamp),
type: "CAN Message"
});
}
this.setState({
rowData
});
};
这现在工作得很好 :) 我还在上面的一个组件中迁移了这个方法,所以数据表只是通过 props 而不是通过状态获取它的数据。 谢谢并关闭!