iT邦幫忙

0

有關JavaScript Array的push 與spread在React的作用差異(已解決)

  • 分享至 

  • xImage

如題,做了一個要效果是選擇的checkbox值裝到一個陣列裡,畫面上即時渲染該陣列的值。
用了兩個方式如下
code連結https://codesandbox.io/s/blazing-feather-3hyt1?file=/src/App.js
第一個是(這樣寫正常):

const onChangeCb = (e) => {
    if (e.target.checked) {
      setCheckBoxArray((arr) => [...arr, e.target.value]);
    } else {
      setCheckBoxArray((arr) => [...arr].filter((a) => a !== e.target.value));
    }
  };

第二個是(會失敗):

const onChangeCb2 = (e) => {
    if (e.target.checked) {
      setCheckBoxArray((arr) => [...arr].push(e.target.value));
    } else {
      setCheckBoxArray((arr) => [...arr].filter((a) => a !== e.target.value));
    }
  };

目前所知setState的array要即時渲染需要地址改變,但spread不是已經回傳一個新array了(第一個成功這樣),而第二個.push這樣寫卻好像還在修改舊地址的array? 原本想法是這樣寫是拿一個新的array去push,不知道是不是我的理解有錯??

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

我要發表回答

立即登入回答