代码如下:
import React from 'react';
import { useState, useEffect } from 'react';
export default function App() {
const [arr, setArr] = useState([0]);
useEffect(() => {
console.log(arr);
}, [arr]);
const handleClick = () => {
Promise.resolve()
.then(() => {
setArr(prevState => [...prevState, 1]);
})
.then(() => {
Promise.resolve()
.then(() => {
setArr(prevState => [...prevState, 2]);
})
.then(() => {
setArr(prevState => [...prevState, 5]);
})
.then(() => {
setArr(prevState => [...prevState, 6]);
});
})
.then(() => {
setArr(prevState => {
setArr(prevState => [...prevState, 4]);
return [...prevState, 3];
});
})
.catch(e => {
console.log(e);
});
};
return (
<>
<button onClick={handleClick}>change</button>
</>
);
}
点击按钮后,控制台的结果显示为
(1) [0]
(2) [0, 1]
(5) [0, 1, 2, 3, 4]
(6) [0, 1, 2, 3, 4, 5]
(7) [0, 1, 2, 3, 4, 5, 6]
想知道为啥结果不是[0, 1, 2, 5, 6, 3, 4]
,以及如何在 Promise 链中正确调用 setState,感谢大家的指点
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.