如何解决React:我不知道如何使用this.state
我有2个.CSV
文件:"1.csv"
和"2.csv"
,我想将每个文件放在表中并打印出来。我的函数异步GetData(文件)和异步FetchCSV(文件)可以正常工作,并返回一个与我的<BootstrapTable />
data 参数。我的 componentDidMount()循环浏览这些文件并为每个文件更改this.state.data
。
state = {
data: [{}],};
async FetchCSV(file) {
const response = await fetch("data/" + file + ".csv");
const reader = response.body.getReader();
const result = await reader.read();
const decoder = new TextDecoder("utf-8");
const csv = await decoder.decode(result.value);
return csv;
}
async GetData(file) {
const data = Papa.parse(await this.FetchCSV(file));
const result = [{}];
for (var i = 1; i < data.data.length - 1; i++) {
result.push({
week: data.data[i][0],kcal: data.data[i][1],exercise: data.data[i][2],});
}
this.setState({ data: result });
return console.log("done");
}
componentDidMount() {
const patients = ["1","2"];
for (var i = 0; i < 2; i++) {
this.GetData(patients[i]);
}
}
这是我的渲染函数,我想在表中打印每个病人,但是我的函数是打印7个空表(因为我用const z进行测试以查看它是否可以渲染)为空,但是我有2个病人,所以应该打印2张桌子。当我尝试为每个.CSV
文件打印表格时,问题出在render方法中。我在map函数之外测试了我的表(如下所示),它工作正常。我的{console.log(items)}
完全按照我的需要打印项目对象,所以我不明白问题出在哪里
render() {
return (
<div>
{
this.state.data.map(function (items,i) {
const columns = [
{datafield: "week",text: "week",},{datafield: "kcal",text: "kcal",{datafield: "exercise",text: "exercise",];
const z = [{}]; // TO TEST IF IT RENDERS
return (
<div>
{console.log(items)} // looks fine (it renders outside map function)
// data = should be items
<BootstrapTable keyField="id" data={z} columns={columns} />
</div>
);
})
}
// this one works fine!!!!
<BootstrapTable
keyField="id"
data={this.state.data}
columns={this.columns}
/>
</div>
);
}
解决方法
列const中有错字
const columns = [
{dataField: "week",text: "week",},{dataField: "kcal",text: "kcal",{dataField: "exercise",ext: "exercise",];
应该是
const columns = [
{dataField: "week",text: "exercise",];
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。