微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

React:我不知道如何使用this.state

如何解决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 举报,一经查实,本站将立刻删除。