首頁猿問 useEffect 內的...

useEffect 內的 setTimeout 和 useState

JavaScript

楊魅力 2023-08-18 09:54:51

我的 useState 掛鉤中有一個對象數組，我想更改每個數組元素的一個屬性，假設它看起來像：const array = [{id:1, isDisplayed: false}, {id:2, isDisplayed: false}, {id:3, isDisplayed: true}]雖然我嘗試使用setTimeout內部useEffect鉤子來更改displayed不需要的任何地方的true屬性isDisplayed: true，但它會等待專用時間，并立即更改所有內容，但我想要實現的是用自己的延遲更改每個元素。我的意思是像 const DELAY = 2000setTimeout 之類的東西setTimeout(() => ... , DELAY * id) ，因為當我渲染 jsx 時，所有內容都會同時出現，我只想在每個元素出現之間產生小的延遲。例如，第一個元素在 2 秒后出現，第二個元素在 3 秒后出現（不是第一個元素后 3 秒）我當前的代碼如下所示：React.useEffect(() => { setTimeout(() => { setArray(array.map((item)=> !item.isDisplayed ? {...item, displayed: true} : item)) }, DELAY * Math.floor(Math.random() * 5);}, [])

查看完整描述

2 回答

慕勒3428872

TA貢獻1848條經驗獲得超6個贊

如果某些項目不可見，您可以設置超時并觸發更新。

并跟蹤是否顯示新項目revealed，如果沒有顯示新項目，則停止流程。

function TodoApp() {

const [items, setItems] = React.useState([

{ id: 1, isDisplayed: false },

{ id: 2, isDisplayed: false },

{ id: 3, isDisplayed: false },

]);

React.useEffect(() => {

let currentTimeout = null;

const displayMoreItems = () => {

setItems(prevItems => {

let revealed = false;

const nextItems = prevItems.map(item => {

if (!revealed && !item.isDisplayed) {

revealed = true;

return { ...item, isDisplayed: true };

}

return item;

});

if (revealed) {

currentTimeout = setTimeout(() => {

displayMoreItems();

}, 1000);

}

return nextItems;

});

};

currentTimeout = setTimeout(() => {

displayMoreItems();

}, 1000);

return () => {

if (currentTimeout) {

clearTimeout(currentTimeout);

}

};

}, [setItems]);

return <div>{items.map(item => (item.isDisplayed ? item.id : null))}</div>;

}

ReactDOM.render(<TodoApp />, document.querySelector('#app'));

這是一個小提琴

反對回復 2023-08-18

侃侃無極

TA貢獻2051條經驗獲得超10個贊

const DELAY = 2000;

React.useEffect(() => {

let count = 1;

array.forEach((item) => {

if (!item.displayed) {

setTimeout(() => {

item.displayed = true;

setArray([...array]);

}, DELAY * count);

count ++;

}

})

}, [])

反對回復 2023-08-18

2 回答
0 關注
247 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

useEffect 內的 setTimeout 和 useState

useEffect 內的 setTimeout 和 useState

2 回答

添加回答