我正在嘗試在 React.JS 中創建一個警報組件，它將接收一個陣列作為道具，然后遍歷內部的所有元素并將它們顯示在警報組件中。
當陣列映射結束時，我不知道如何重新啟動回圈。
這是我的代碼：
useEffect(() => {
props.messages.map((item, index) => {
setTimeout(() => {
setMessage(item);
}, 5000*index)
});
},[]);
我想連續運行回圈，直到用戶關閉通知警報。
我的猜測是將地圖包裹在 while / do while 中，以便在用戶關閉通知欄之前運行它。一旦陣列的映射到達最后一個元素，我就無法重新啟動回圈。
uj5u.com熱心網友回復：
您實際上并不需要計算索引并將其重置為零。
添加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]} />
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/379255.html
標籤：javascript 反应 反应钩子