在我的 react.js 網站使用 typeped 包時，它顯示的是雙字母而不是一個。螢屏截圖：https : //ibb.co/pd6GmHQ 在沒有 backDelay 和 backSpeed 的情況下運行一次時，它只顯示一個字符而運行良好。洗掉 backDelay 和 backSpeed 后，它運行不正常，即顯示兩位數。如果這是一個愚蠢的問題，我很抱歉，我是新手。這是我的 jsx 檔案：
import React, { useEffect, useRef } from 'react'
import "./intro.scss"
import { init } from 'ityped'
export default function Intro() {
const textRef = useRef();
useEffect(()=>{
init(textRef.current,{
showCursor: true,
backDelay: 1500,
backSpeed:60,
strings: ["Developer","Designer","Content Creator"],
});
},[]);
return (
<div className="intro" id="intro">
<div className="left">
<div className="imgContainer">
<img src="assets/smit.jpg" alt="" />
</div>
</div>
<div className="right">
<div className="wrapper">
<h2>Hi there, I'm</h2>
<h1>Smit Thakkar</h1>
<h3>Freelance <span ref ={textRef}></span></h3>
</div>
<a href="#probackground">
<img src="assets/down.png" alt="" />
</a>
</div>
</div>
)
}
uj5u.com熱心網友回復：
重復問題是兩個主要因素的組合：
1.) 這個型別化的包在 DOM 級別上運行，這在 React 中是不鼓勵的，因為它利用了一個虛擬 DOM，該虛擬 DOM 期望通過更新 React 狀態來更新。雖然這個包可以并且確實有效，但您會發現它在使用StrictMode時重復，并且useEffect- 在開發中，嚴格模式呼叫useEffect兩次；結果，呼叫init了兩次。
2.）它重復的另一個原因是因為它使用setInterval的不是在熱多載時清理的。因此，每次您對組件進行更改時，它都會復制此處init顯示的功能（對檔案進行任何更改，并注意每次熱多載發生時都會發生一個新實體；在該說明中，此示例使用使用全域變數破解變通方法，我非常不鼓勵在您的專案中使用）。App.jsinitisLoading
按層次順序排列的建議：
A.) 根本不要使用這個包。
B.) 不要使用包，而是使用 React 狀態/React 生命周期開發相同的功能，這將在熱多載/組件卸載時自行清理。
C.) 使用包并處理開發中的重復，但要知道這在生產中可能不會發生。雖然......這個包不會對組件卸載進行任何清理這一事實應該令人不安，并且可能會導致 MPA（多頁應用程式）出現問題，其中組件被卸載/重新安裝 - 這可能會導致重復問題生產。更令人不安的是，這個包對element未定義沒有任何防范，所以它也會拋出錯誤。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/463573.html