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

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

操作數組副本(通過擴展運算符創建)更改內存中的原始數組

操作數組副本(通過擴展運算符創建)更改內存中的原始數組

POPMUISE 2022-12-22 14:42:29
https://codesandbox.io/s/chart-3yx8p“圖表”組件由 3 個圖表層疊而成:折線圖 - “VictoryLine”組件2 個散點圖 - “VictoryScatter”組件折線圖只是呈現線。第一個散點圖在線上的每個點上呈現藍色圓圈 - 我們將其稱為“BlueScatter”。這兩個接收相同的靜態數據。第二個散點圖呈現底部的黑點 - 我們將其稱為“BlackScatter”。BlackScatter 的數據處于需要更改的狀態。每當您將鼠標懸停在其中一個藍色圓圈上時,會發生兩件事:顯示工具提示圓圈下方的黑點向上移動了一半當您的鼠標離開圓圈時,工具提示消失,點將向下移動。然而后者并沒有發生......當您將鼠標懸停在一個圓圈上時,傳遞給該圓圈標簽組件的“活動”道具將設置為 true - 當您的鼠標離開時設置為 false。“Tooltip”組件設置為 BlueScatter 上每個點的標簽,因此 Tooltip 接收此 prop。Tooltip 只是一個不可見的 SVG,用于錨定 Material UI 工具提示。BlueScatter 的事件處理程序控制此邏輯(請參閱常量文件)。在 Tooltip 中,我使用從 Chart 傳遞的 props 來更改該索引處 BlackScatter 數據的坐標。綜上所述:在圖表中,我將 INITIAL_HOVER_DATA 傳播到狀態數組中以設置 BlackScatter 的數據。在 Tooltip 中,我再次將該常量擴展到一個空數組中,以便在以下 if 語句中使用。過去我一直能夠使用擴展運算符來制作數組的副本 - 但由于某種原因,工具提示中的第 14 行似乎正在操縱內存中的原始常量。這就是為什么黑點不回到原來的位置。為什么會這樣?取消注釋第 16 行會使事情按預期工作,但理論上不需要它。順便說一句——如果有人能提出更好的方法來實現同樣的功能,我會很高興收到反饋!TLDR:操作 INITIAL_HOVER_DATA 數組的副本會更改內存中的原始數組。
查看完整描述

1 回答

?
縹緲止盈

TA貢獻2041條經驗 獲得超4個贊

問題

即使您淺復制數組,newHoverData[index].y = yValue / 2;也是狀態突變,因為您沒有同時復制每個更新的元素。每個元素仍然引用原始數組中的元素。


解決方案

淺拷貝數組和要更新的元素


useEffect(() => {

  const { y: yValue } = data[index];

  setScatterHoverData(

    INITIAL_HOVER_DATA.map((el, i) =>

      i === index && active

        ? {

            ...el,

            y: yValue / 2

          }

        : el

    )

  );

}, [active]);


查看完整回答
反對 回復 2022-12-22
  • 1 回答
  • 0 關注
  • 71 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號

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