我正在嘗試在 React.JS 中創建一個警報組件，它將接收一個數組作為道具，然後遍歷內部的所有元素並將它們顯示在警報組件中。
當數組映射結束時，我不知道如何重新啟動循環。
這是我的代碼：
useEffect(() => {
props.messages.map((item, index) => {
setTimeout(() => {
setMessage(item);
}, 5000*index)
});
},[]);
我想連續運行循環，直到用戶關閉通知警報。
我的猜測是將地圖包裹在 while / do while 中，以便在用戶關閉通知欄之前運行它。一旦數組的映射到達最後一個元素，我就無法重新啟動循環。
您實際上並不需要計算索引並將其重置為零。
添加index狀態和安裝useEffect掛鉤以在 5 秒間隔內增加索引。不要忘記返回一個清理函數來清除間隔計時器。
const [index, setIndex] = React.useState(0);
useEffect(() => {
const timerRef = setInterval(() => {
setIndex(i => i + 1);
}, 5000);
return () => clearInterval(timerRef);
},[]);
使用useEffect依賴於index狀態的第二個鉤子。當它更新時，取index數組長度的模數來計算有效的範圍內索引並更新當前message狀態。
useEffect(() => {
const { messages } = props;
setMessage(messages[index % messages.length]);
}, [index]);
但是，第二個useEffect鉤子和message狀態不是必需的，可以認為是派生狀態。派生自props.messages數組和當前index狀態。您可以直接在呈現的警報中直接使用這些。
例子：
<Alert message={messages[index % messages.length]} />
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句