时间戳

首页 > 解决方案 > Async/Await 没有按预期工作：ReactJS+ Async Await

javascript - Async/Await 没有按预期工作：ReactJS+ Async Await

问题描述

我在使用 aysnc 和 await 执行 API 调用时遇到问题。我正在使用一个数据网格，其中每个列都有数据、列和一组下拉选项来实现列过滤（我从服务器获取的数据和下拉选项）。

列配置数组取决于这些选项，其中每列都标记有与其对应的选项。我已将此列过滤器提取为一个单独的组件，并在其中传递此选项。

对该服务器的 Fetch API 调用的工作方式是，每次查询时我都会获得一个 ID，然后将该 ID 传递给下一个函数以获取实际数据。

所以我先查询表数据，然后获取下拉值，然后设置列对象，以便正确呈现表。

但这里的问题是，按照我编写代码的方式，它应该可以正常工作。但是，当我刚刚加载页面时，它在 getColumnFilterValues 中出现错误，提示“无法读取未定义的参数”。使用 async/await 下拉值应该在设置列数据之前可用。但就我而言，它会引发上述错误。

有人可以告诉这里出了什么问题吗？


import * as React from "react";
const FETCH_ID_URL = "/fetch/id";
const FETCH_DATA_URL = "/fetch/data";


export default class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [], // hold table data
      columns: [], // hold column config
      dropDownValues: [], // hold column filter dropdown values
    };
  }

  async componentDidMount() {
    await this.fetchTableData(); // First fetching the table data
    await this.fetchDropDownValues(); // fetching the dropdown values for each column  
    this.setColumnData();  // then setting column object which is dependent on dropdown values
  }

  fetchDropDownValues = async () => {
    await this.fetchID(FETCH_ID_URL, payload, "dropDownValues");
  };

  fetchTableData = async () => {
    await this.fetchID(FETCH_ID_URL ,payload, "data");
  };

  fetchID = async (url, body, stateObject) => {
    try {
          const config = {
                          method: 'POST',
                          body: JSON.stringify(data)
                         }

         let response = await  fetch( url: FETCH_ID_URL, config);
         setTimeout(() => this.fetchData(response, stateObject), 2000); // Waiting for the ID to receive and then call fetchData
    } catch (e) {
      console.log(e);
    }
  };

  fetchData = async(obj: any, stateObject: string) => {
    try {
          const config = {
                          method: 'POST',
                          body: JSON.stringify(obj.id)
                         }
         let response = await  fetch( url: FETCH_DATA_URL, config);
         if (stateObject === "dropDownValues") {
           this.setState({ [stateObject]: response.dropdownData});
         } 
         else 
         {
            this.setState({[stateObject]: response.tableData});
         }
    } catch (e) {
      console.log(e);
    }
  };

  getValuesFromKey = (param: string) => {
    let data: any = this.state.dropDownValues[param]; //Throwing error here , giving cant read param of undefined
    let result = data.map((value: any) => {
      let keys = Object.keys(value);
      return {
        field: keys[0],
        checked: false,
      };
    });
    return result;
  };


  setColumnData = () => {
     let columns = [
      {
        Header: () => (
          <div>
              <Child
                name="firstName"
                options={this.getValuesFromKey("firstName")}
              />
            <span>First Name</span>
          </div>
        ),
        accessor: "firstName"
      },
      {
        Header: () => (
          <div>
              <Child
                name="status"
                options={this.getValuesFromKey("status")}
              />
            <span>Status</span>
          </div>
        ),
        accessor: "status",
      }
    ];
    this.setState({ columns });
  };

  render() {
    let { data, columns } = this.state;
    return (
       <ReactTable
          data={data}
          columns={columns}
        />
    );
  }
}

标签： javascriptreactjsecmascript-6async-awaitsetstate

解决方案

问题出在这一行：

setTimeout(() => this.fetchData(response, stateObject), 2000); // Waiting for the ID to receive and then call fetchData

this.setColumnData();应在setTimeout上述执行完成后调用。为此，您需要将 包装setTimeout在 a 中Promise：

return new Promise(resolve => {
  setTimeout(async () => {
    await this.fetchData(response, stateObject);
    resolve();
  }, 2000);
});

推荐阅读