const BlogList: React.FunctionComponent<IProps> = (props: IProps) => {
let [fakedata, setFakeData] = React.useState<blogsData>([]);
React.useEffect(() => {
async function temp () {
let res = await getBlogsData();
let data: blogsData = (res as blogFromData).map(value => {
return {
title: value.title,
description: value.description ? value.description : "",
date: new Date(value.createDate).toLocaleDateString(),
views: value.views,
likes: value.likes,
labels: value.labels
setFakeData(data);
temp();
}, [])
注意:在useEffect中不能直接使用async函数,因为只要是async函数就会返回一个Promise,因此我们需要再套一层函数,然后再赋值。
直接上例子const BlogList: React.FunctionComponent<IProps> = (props: IProps) => { let [fakedata, setFakeData] = React.useState<blogsData>([]); React.useEffect(() => { async function temp () { let res = await getBl
import React, { Component } from "react";
import "./scss/header.scss";
export default class header extends Component {
state = {
header: "",
setStateAsync = (state) => {
return new Promise((resolve, reject) => {
this.setState(s
useEffect的一些注意点
忘记lifecycle生命周期的观念,拥抱synchronization同步
在class component里面,lifecycle是我们做一切的基础,但是在使用react-hooks的时候,请忘记lifecycle,尽管useEffect函数很多时候达到了相似的效果
但从根本上来讲,react-hooks的作用是一种同步的作用,同步函数hooks函数内的内容与外部的props以及state,所以才会在每次render之后执行useEffect里面的函数,这时可以获取到当前
如果在使用 async-await 处理接口取返回值,若没有对返回值进行 Promise 封装处理,那么最终等到的返回值就是一个 Promise对象。
所以需要在将接口获取到值往外层函数传的时候,对其进行 Promise 封装处理,然后再得到一个 Promise 封装处理后的对象 之后用 Promise.allSettled() 取对象里的值,在用 filter() 函数 和 map() 函数 对其值进行过滤筛选,最终获取到的才是我们要的值。
const fetchCheck = async () =&
异步加载组件就是为了解决初始化页面加载慢,这个时候我们应该将代码进行分割,按需加载。
一、利用import() 编写 asyncComponent.js
es6提供import()函数,它是运行时执行,也就是说,什么时候运行到这一句,就会加载指定的模块。
import()返回一个 Promise 对象
asyncComponent.js
import React, { Component } fr...
在
React经常会有需要通过异步请求返回的
数据,然后再setState到state
中的操作。但是经常会因为异步的问题,导致
数据显示有误,这里我通过
async解决这个问题,下面是代码。
async componentDidMount() {
const data = a
wait get(`url`) this.setState({
data: data
async/await 是个非常好用的处理的异步的es8新功能。
在react中使用也是特别方便的,如果你是通过create-react-app 创建的项目就不要担心浏览器的支持。直接使用即可。
直接上代码演示,我的axios是经过封装过后Promise。使用原生的也是一样效果,axios原生返回的也是Promise ,所以可以直接 通过let result = awiat Promise 中...
Async/Await
Async/Await是尚未正式公布的ES7标准新特性。简而言之,就是让你以同步方法的思维编写异步代码。对于前端,异步任务代码的编写经历了 callback 到现在流行的 Promise ,最终会进化为 Async/Await 。虽然这个特性尚未正式发布,但是利用babel
polyfill我们已经可以在应用中使用它了。
http://www.tuicool
可以在 `useEffect` 中使用 `async/await`,但需要注意一些细节。
首先,需要将 `useEffect` 的回调函数声明为 `async` 函数,例如:
```javascript
useEffect(async () => {
const result = await fetchSomeData();
setData(result);
}, []);
其次,需要在 `async` 函数中使用 `try/catch` 捕获异常,例如:
```javascript
useEffect(async () => {
try {
const result = await fetchSomeData();
setData(result);
} catch (error) {
console.error(error);
}, []);
最后,需要注意 `async` 函数的返回值。`useEffect` 的回调函数不能返回 `Promise`,因此不能直接使用 `async/await` 返回值。如果需要在 `useEffect` 中返回值,可以使用 `Promise` 和 `useState` 配合,例如:
```javascript
const [data, setData] = useState(null);
useEffect(() => {
async function fetchData() {
const result = await fetchSomeData();
setData(result);
fetchData();
}, []);
return data ? <div>{data}</div> : <div>Loading...</div>;
在上面的例子中,我们使用 `useState` 创建了一个名为 `data` 的状态,然后在 `useEffect` 中调用 `fetchData` 函数获取数据并设置 `data` 状态。最后,我们根据 `data` 状态渲染 UI。
总之,React 中使用 `async/await` 并不困难,但需要注意一些细节,特别是在 `useEffect` 中使用时。