反应：我不知道如何使用 this.state 映射我的表

Question

我有 2 个.CSV 文件："1.csv" 和 "2.csv"，我想将每个文件放在一个表格中并打印出来。我的函数 async GetData(file) 和 async FetchCSV(file) 工作正常，并返回我的 <BootstrapTable /> 所需的对象数组数据参数。我的 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 文件打印表格时，问题出在渲染方法中。我在 map 函数之外测试了我的表（如下所示），它工作正常。我的{console.log(items)} 完全按照我的需要打印 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>
  );
}

Answer 1

您的列 const 中有错字

const columns = [
                {dataField: "week",text: "week",},
                {dataField: "kcal",text: "kcal",},
                {dataField: "exercise",ext: "exercise",},];

应该是

const columns = [
                {dataField: "week",text: "week",},
                {dataField: "kcal",text: "kcal",},
                {dataField: "exercise",text: "exercise",},];