第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

React 將回調(diào)函數(shù)傳遞給多個(gè)子組件

React 將回調(diào)函數(shù)傳遞給多個(gè)子組件

暮色呼如 2023-05-11 13:51:44
我正在嘗試制作一個(gè)可以獲取其子項(xiàng)在渲染上的位置的函數(shù),以便它可以重新渲染它們而不會(huì)重疊(它們是絕對(duì)定位的)。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/>&emsp;&emsp;</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)的最后一個(gè)組件的位置map()。如何在不覆蓋先前迭代的情況下從回調(diào)函數(shù)調(diào)用 setState?我是否需要綁定回調(diào)函數(shù)(這在功能組件中是如何工作的)?
查看完整描述

1 回答

?
冉冉說

TA貢獻(xiàn)1877條經(jīng)驗(yàn) 獲得超1個(gè)贊

狀態(tài)僅設(shè)置為函數(shù)中呈現(xiàn)的最后一個(gè)組件的位置map()。

我認(rèn)為這表明在循環(huán)中對(duì)狀態(tài)更新進(jìn)行排隊(duì)并使用基于值的狀態(tài)更新。IE 每個(gè)腳注都已安裝并調(diào)用footnotePositionupdatePositions用他們的位置回調(diào)并覆蓋先前排隊(duì)的狀態(tài)值。

這是您要使用功能狀態(tài)更新的情況。功能狀態(tài)更新有點(diǎn)像 reducer 函數(shù),但它只將當(dāng)前狀態(tài)作為參數(shù)。偽代碼看起來像這樣

setMyState(state => state + update)

這是我的一個(gè) Demo Codesandbox 來幫助說明兩種狀態(tài)更新之間的區(qū)別。


假設(shè)您的其余組件邏輯是合理的(我對(duì)數(shù)組的相關(guān)性有一些不確定性articlefootnotePositions)那么我有以下建議:

更新您的updatePositions函數(shù)以使用功能狀態(tài)更新。

const updatePositions = (footnotePosition) => {
  setFootnotePositions(positions => [...positions, footnotePosition]);
}

變化不大,但現(xiàn)在您可以對(duì)多個(gè)狀態(tài)更新進(jìn)行排隊(duì),并且每個(gè)更新都將從先前計(jì)算的“下一個(gè)狀態(tài)”值進(jìn)行更新。


查看完整回答
反對(duì) 回復(fù) 2023-05-11
  • 1 回答
  • 0 關(guān)注
  • 150 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)