gpt4 book ai didi

javascript - 异步/等待未按预期工作 : ReactJS+ Async Await

转载 作者:行者123 更新时间:2023-12-02 23:14:27 24 4
gpt4 key购买 nike

我在使用 aysnc 和await 执行API 调用时遇到问题。我正在使用一个数据网格,其中包含 data 、 columns 和每列的一组下拉选项来实现列过滤(数据和我从服务器获取的下拉选项)。

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

对此服务器的 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}
/>
);
}
}


最佳答案

问题出在这一行:

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

this.setColumnData(); 应在上面的 setTimeout 执行完毕后调用。为此,您需要将 setTimeout 包装在 Promise 中。 :

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

关于javascript - 异步/等待未按预期工作 : ReactJS+ Async Await,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57214955/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com