暮色呼如
2023-05-11 13:51:44
我正在嘗試制作一個可以獲取其子項在渲染上的位置的函數(shù),以便它可以重新渲染它們而不會重疊(它們是絕對定位的)。const ContentWrapper: React.FC<{article: Article.article.article}> = ({ article }) => { const [footnotePositions, setFootnotePositions] = useState<Number[]>([]); const updatePositions = (footnotePosition) => { setFootnotePositions([...footnotePositions, footnotePosition]); } useEffect(() => { // re position children... idk where to put this haven't gotten this far }, [footnotePositions]) return ( <> {article.map( (x, i) => ( <span key={i}> { x[1]==='' ? <Line>{x[0]}<br/>  </Line> : <> <Line>{x[0]}</Line> <FootnoteRef footnotePosition={updatePositions} /> <Citation footnote={x[1]}/> </> } </span> ))} </> )}我可以調(diào)試并看到該updatePositions函數(shù)被正確調(diào)用,但是它沒有正確設(shè)置狀態(tài)(我假設(shè)是因?yàn)楫惒叫再|(zhì) setState())。狀態(tài)僅設(shè)置為函數(shù)中呈現(xiàn)的最后一個組件的位置map()。如何在不覆蓋先前迭代的情況下從回調(diào)函數(shù)調(diào)用 setState?我是否需要綁定回調(diào)函數(shù)(這在功能組件中是如何工作的)?
1 回答
冉冉說
TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個贊
狀態(tài)僅設(shè)置為函數(shù)中呈現(xiàn)的最后一個組件的位置
map()。
我認(rèn)為這表明在循環(huán)中對狀態(tài)更新進(jìn)行排隊并使用基于值的狀態(tài)更新。IE 每個腳注都已安裝并調(diào)用footnotePosition| updatePositions用他們的位置回調(diào)并覆蓋先前排隊的狀態(tài)值。
這是您要使用功能狀態(tài)更新的情況。功能狀態(tài)更新有點(diǎn)像 reducer 函數(shù),但它只將當(dāng)前狀態(tài)作為參數(shù)。偽代碼看起來像這樣
setMyState(state => state + update)
這是我的一個 Demo Codesandbox 來幫助說明兩種狀態(tài)更新之間的區(qū)別。
假設(shè)您的其余組件邏輯是合理的(我對和數(shù)組的相關(guān)性有一些不確定性articlefootnotePositions)那么我有以下建議:
更新您的updatePositions函數(shù)以使用功能狀態(tài)更新。
const updatePositions = (footnotePosition) => {
setFootnotePositions(positions => [...positions, footnotePosition]);
}變化不大,但現(xiàn)在您可以對多個狀態(tài)更新進(jìn)行排隊,并且每個更新都將從先前計算的“下一個狀態(tài)”值進(jìn)行更新。
添加回答
舉報
0/150
提交
取消
