目前我面臨的問題是，我想在React中，一旦某個道具被初始化或改變了某個值，就改變一個子組件的狀態。如果我用一個簡單的if-query來解決這個問題，那么我當然會得到一個無限的回圈，因為這些組件會被反復渲染。
組件（父級）：
function App（）{
const [activeSlide, setActiveSlide] = useState（0）。
function changeSlide（index） {
setActiveSlide（index）。
}
return (
<div className="app"/span>>
<div className="app__nav"/span>>
< 按鈕 圖示="FiSun" 處理程式={changeSlide} active={activeSlide} index="0" />
< 按鈕 圖示="FiSettings" 處理程式={changeSlide} active={activeSlide} index="1"/span> />
</div>
</div>/span>
);
}
組件（子）：
function Button（props） {
const Icon = Icons[props.icon]。
const [activeClass, setActiveClass] = useState(""/span>)。
//這就嘗試了一個無盡的回圈。
if(props.active == props.index) {
setActiveClass("active") 。
}
function toggleView（e）{
e.preventDefault（）。
props.handler（props.index）。
}
return(
< button className={activeClass} data-index={props。 index} onClick={toggleView}>
<Icon />
</button>
)
}
這里有一個合理而簡單的方法嗎？我的想法是把if-query寫到return()中，從而產生兩個不同的輸出，盡管我實際上想避免這種情況
uj5u.com熱心網友回復：
React 檔案中有一個很好的檢查表這里，用于確定某些東西是否屬于狀態中。以下是該串列：
- 它是通過道具從父代傳遞進來的嗎？如果是的話，它可能不屬于狀態。
- 它是否隨著時間的推移而保持不變？如果是的話，它可能不是狀態。
- 你能根據你組件中的任何其他狀態或道具來計算它嗎？如果是的話，它就不是狀態。
活動類不符合該標準，應該在需要時進行計算而不是放在狀態中。
return(
<button className={props.active == props.index ? 'active' : ''}。data-index={props.index} onClick={toggleView}>
<Icon />
</button>
)
uj5u.com熱心網友回復：
這是一個很好的使用的useEffect。
。代替if陳述句，你可以用;
代替。const {active, index} = props
useEffect(_ =>/span> {
if(active == index) {
setActiveClass("active"/span>)。
}
}, [active])
函式中的最后一項是一個依賴關系，所以useEffect將只在活動道具發生變化時運行。
uj5u.com熱心網友回復：
嘗試使用useEffect這個鉤子來防止無限回圈。(https://fr.reactjs.org/docs/hooks-effect.html)
或者使用Callback鉤子。(https://fr.reactjs.org/docs/hooks-reference.html#usecallback)
試試這個，告訴我它是否適合你：
function App（）{
const [activeSlide, setActiveSlide] = useState（0）。
const changeSlide = useCallback(() => {
setActiveSlide（index）。
}, [index])。
return (
<div className="app"/span>>
<div className="app__nav"/span>>
< 按鈕 圖示="FiSun" 處理程式={changeSlide} active={activeSlide} index="0" />
< 按鈕 圖示="FiSettings" 處理程式={changeSlide} active={activeSlide} index="1"/span> />
</div>
</div>/span>
);
}
uj5u.com熱心網友回復：
當狀態或道具發生變化時，React會自動重新渲染一個組件。如果你只是使用activeClass來管理className，你可以像這樣移動className中的條件并擺脫狀態。
<button className={props.active ==props.index ? 'active' : ''} data-index={props.index} onClick={toggleView}>
<Icon />>
</button>
然而，如果你仍然想在子組件中使用狀態，你可以使用useEffect鉤子來更新子組件的狀態。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/322743.html
標籤：