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",];