- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在使用 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/
我有一个 forEach循环处理数组中的数据。在该循环中间的某个地方,我必须等待 DOM 元素的更改,获取该更改,处理它,然后才能继续处理数组。 我希望在控制台中看到这个: Preparing "aa
给定以下方法: public async Task DoSomethingAsync() { // do some work await OpenSomeFileAsync();
尝试在 .exports 中运行一个异步函数,获取 Promise,然后在下一个异步函数中使用结果,但由于某种原因,无论等待如何,第二个函数都会在第一个函数之前执行。 销售.js = const sq
谁能解释为什么 c# 5 中的异步函数需要至少有 1 个等待?我找不到明确的理由/解释。 所谓必需,是指当异步函数内部没有任何 await 调用时编译器会发出警告,但不会抛出编译错误。 来自 this
我想用 Mocha 测试异步代码. 我跟着这个教程testing-promises-with-mocha .最后,它说最好的方法是 async/await。 以下是我的代码,我打算将 setTimeo
这个问题在这里已经有了答案: How do yield and await implement flow of control in .NET? (5 个答案) How is resumption
我想在 trait 中编写异步函数,但是因为 async fn in traits 还不被支持,我试图找到等效的方法接口(interface)。这是我在 Rust nightly (2019-01-0
在 node.js 中,我有一个数据库事务,我想在 then 回调中调用一个 async 方法,但我收到错误消息 关键字“等待”已保留。 这是异步 saveImage 函数: const saveIm
我正在包装 AspNet.Identity。但有些事情让我对 TPL 感到困惑。 第一个例子: public virtual async Task RemovePasswordAsync(st
我有三个 showDialog 示例。我认为 _showAlert1 是正确的,但它使用 2 个函数来实现它。 _showAlert2 也有效,但我认为它不正确,因为我认为 showDialog 是异
我正在编写一个应该尽可能快地执行所有异步函数的函数,但是,它们中只有 5 个可以同时运行。 我想使用 Promise.race 来实现,所以实现不是最好的。问题是代码执行不会在 await 处停止。我
在 Scala 和其他编程语言中,可以使用 Futures 和 Await。 (在实际代码中,会使用例如 zip+map 而不是 Await) def b1() = Future { 1 } def
这个问题在这里已经有了答案: At the end of an async method, should I return or await? (2 个回答) 8年前关闭。 我做了一些阅读,并认为我已
我知道这是一个非常开放的问题,我深表歉意。 我可以看到 Await.ready返回 Awaitable.type而 Await.result返回 T但我仍然混淆他们。 两者有什么区别? 一个是阻塞的,
为什么等待者(GetAwaiter - 使类可等待)是结构而不是类。使用类有什么坏处吗? public struct ConfiguredTaskAwaiter : ICriticalNotifyCo
这个问题在这里已经有了答案: Why doesn't Scala's Future have a .get / get(maxDuration) method, forcing us to resor
async/await 链中的所有函数都必须使用 async/await 关键字吗? async function one() { return await fetch(.....); } asy
点击组件的按钮时将执行以下方法。 async onClickButton() { await this.shoppingCartService.add(this.selectedOffer);
它似乎被记录在案的唯一地方是 this issue thread和 the actual specification .但是,删除的原因并没有在我能找到的任何地方发布。 新的推荐方式似乎是await
为什么使用 await 需要将其外部函数声明为 async? 例如,为什么这个 mongoose 语句需要它所在的函数来返回一个 promise? async function middleware(
我是一名优秀的程序员,十分优秀!