亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React 將回調函數傳遞給多個子組件

React 將回調函數傳遞給多個子組件

暮色呼如 2023-05-11 13:51:44
我正在嘗試制作一個可以獲取其子項在渲染上的位置的函數,以便它可以重新渲染它們而不會重疊(它們是絕對定位的)。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>      ))}    </>  )}我可以調試并看到該updatePositions函數被正確調用,但是它沒有正確設置狀態(我假設是因為異步性質 setState())。狀態僅設置為函數中呈現的最后一個組件的位置map()。如何在不覆蓋先前迭代的情況下從回調函數調用 setState?我是否需要綁定回調函數(這在功能組件中是如何工作的)?
查看完整描述

1 回答

?
冉冉說

TA貢獻1877條經驗 獲得超1個贊

狀態僅設置為函數中呈現的最后一個組件的位置map()。

我認為這表明在循環中對狀態更新進行排隊并使用基于值的狀態更新。IE 每個腳注都已安裝并調用footnotePositionupdatePositions用他們的位置回調并覆蓋先前排隊的狀態值。

這是您要使用功能狀態更新的情況。功能狀態更新有點像 reducer 函數,但它只將當前狀態作為參數。偽代碼看起來像這樣

setMyState(state => state + update)

這是我的一個 Demo Codesandbox 來幫助說明兩種狀態更新之間的區別。


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

更新您的updatePositions函數以使用功能狀態更新。

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

變化不大,但現在您可以對多個狀態更新進行排隊,并且每個更新都將從先前計算的“下一個狀態”值進行更新。


查看完整回答
反對 回復 2023-05-11
  • 1 回答
  • 0 關注
  • 157 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號