iT邦幫忙

0

React 問題請教

最近正在看React

有看到兩個例子,想請教一下

function ExampleA() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
function ExampleB() {
  const [obj, setObject] = useState({
  
    count: 0,
    name: "ml"
  });
  return (
    <div>
      Count: {obj.count}
      <button onClick={() => setObject({ ...obj, count: obj.count + 1 })}>+</button>
    </div>
  );
}

1.為什麼ExampleB的Hook要這樣寫?還有他的setObject也為什麼要這樣寫?
我看這兩個執行結果都差不多,不太清楚他們的差異

2.Example的setCount裡他是這樣寫

<button onClick={() => setCount(count + 1)}>

但我看到有網站說這樣比較安全

<button onClick={() => setCount(prevCount => prevCount + 1)}>

https://medium.com/@xyz030206/%E9%97%9C%E6%96%BC-usestate-%E4%BD%A0%E9%9C%80%E8%A6%81%E7%9F%A5%E9%81%93%E7%9A%84%E4%BA%8B-5c8c4cdda82c

真的是如他所說的嗎?我看滿多範例都還是單純的(count+1)

這些我暫時還不太懂,所以想請問一下

2 個回答

0
listennn08
iT邦高手 7 級 ‧ 2020-11-12 17:30:18

你貼的那個網站有說了
因為 useState 是非同步的 所以那樣寫可能會導致在某些情況下變數沒有更新
官方給的範例其實也是使用這種方式
下面也解釋了兩種使用上的差異

<button onClick={() => setCount(prevCount => prevCount + 1)}>

不過使用上還是取決於有沒有需要用到更新變數前的值
如果沒有我覺得可以簡寫就好

0
nero
iT邦新手 5 級 ‧ 2020-12-15 14:58:43

ExampleB的setState的写法是这样:

setObject({ ...obj, count: obj.count + 1 })}

这是因为ExampleB组件的state: obj是引用类型。每次setObject的时候,傳給它的參數要是一個全新的引用。所以setObject的入參是一個全新對象。對象采用這種寫法:

{ ...obj, count: object.count + 1 }

這是一種簡易寫法,先展開obj,再用新的字段覆蓋原有obj的值。當然你也可以這樣寫:

setObject({ name: "ml",  count: object.count + 1 })

效果是一樣的。只要保證只改動需要變化的字段,其餘的字段保持不變即可

我要發表回答

立即登入回答