1 回答

TA貢獻1860條經驗 獲得超8個贊
一旦 React 組件被渲染,就可以假設組件的當前“狀態”像快照一樣存在。
console.log 中的“myArray”是創建 firePromise 時的“myArray”。所以保留第一個值是正確的。(每次渲染組件時,都會創建一個新的 firePromise。)
有一種方法。第一個是使用 ref,第二個是使用 setState。
第一的
function App() {
? const myArray = useRef<Array<number>>([0, 1, 2]);
? const sleep = (ms: number) => {
? ? return new Promise((resolve) => setTimeout(resolve, ms));
? };
? const updateArray = () => {
? ? myArray.current.push(myArray.current.length);
? };
? const firePromise = () => {
? ? new Promise(async (resolve) => {
? ? ? const timeStamp = new Date().getTime();
? ? ? let repeatTime = 0;
? ? ? while (repeatTime < 12) {
? ? ? ? console.log(
? ? ? ? ? "array: ",
? ? ? ? ? myArray.current,
? ? ? ? ? "promiseIdenifier: ",
? ? ? ? ? timeStamp
? ? ? ? );
? ? ? ? repeatTime += 1;
? ? ? ? await sleep(1000);
? ? ? }
? ? ? resolve({ timeStamp, myArray: myArray.current });
? ? })
? ? ? .then((val) => {
? ? ? ? console.log("resolved: ", val);
? ? ? })
? ? ? .catch((err) => {
? ? ? ? console.log("rejected: ", err);
? ? ? });
? };
? return (
? ? <div className="App">
? ? ? <button onClick={firePromise}>new promise</button>
? ? ? <button onClick={updateArray}>updateArray</button>
? ? </div>
? );
}
export default App;
第二
function App() {
? const [myArray, setMyArray] = useState([0, 1, 2]);
? const sleep = (ms: number) => {
? ? return new Promise((resolve) => setTimeout(resolve, ms));
? };
? const updateArray = () => {
? ? setMyArray([...myArray, myArray.length]);
? };
? const firePromise = () => {
? ? new Promise(async (resolve) => {
? ? ? const timeStamp = new Date().getTime();
? ? ? let repeatTime = 0;
? ? ? while (repeatTime < 12) {
? ? ? ? setMyArray((prevMyArray) => {
? ? ? ? ? console.log("array: ", prevMyArray, "promiseIdenifier: ", timeStamp);
? ? ? ? ? return prevMyArray;
? ? ? ? });
? ? ? ? repeatTime += 1;
? ? ? ? await sleep(1000);
? ? ? }
? ? ? setMyArray((prevMyArray) => {
? ? ? ? resolve({ timeStamp, prevMyArray });
? ? ? ? return prevMyArray;
? ? ? });
? ? })
? ? ? .then((val) => {
? ? ? ? console.log("resolved: ", val);
? ? ? })
? ? ? .catch((err) => {
? ? ? ? console.log("rejected: ", err);
? ? ? });
? };
? return (
? ? <div className="App">
? ? ? <button onClick={firePromise}>new promise</button>
? ? ? <button onClick={updateArray}>updateArray</button>
? ? </div>
? );
}
export default App;
將回調傳遞給 setState 函數時,當前狀態將作為第一個參數傳遞。這是使用這個的快捷方式。
建議使用當值改變時視圖應該改變的值作為狀態。更改“myArray”不會影響視圖,因此使用 ref 是正確的方法。
添加回答
舉報