React 中狀態修改與 setState() 的 key 值動態設置

在 React 中狀態的修改是非常常見的事,而工作中幾乎都是使用函式組件,所以 Hooks 是極為重要的一個概念。今天來分享一些關於 React 中 state 的修改方法。

類式組件修改 state

在類式組件中,當我們需要定義多個 state 時可以用物件的方式來給定,比如:

this.state{
  counter: 0,
  top: 10,
  bottom: 20
  ...
};

需要修改 state 的值時,可以利用 setState 函數來修改,並且是合併式修改,比如下面的例子只修改了 counter,但是 React 會自動幫你合併到目前的 state,因此 top, bottom 也會保留:

this.setState((state, props) => ({
  count: state.counter + props.increment
}));

函式組件修改 state

同樣的在函式組件中我們可以使用 useState 這個 hook 來達到相同效果,你可以在 useState(defaultValue) 中給定初始值,而這個初始值只有在第一次 render 的時候用到:

const [counter, setCounter] = useState(0)

當我們需要定義多個 state時可以使用物件的方式來給定,使用 setDate 函數可以修改 date 的值:

const [date, setDate] = useState({ start: new Date(), end: new Date() })

這個 setXxxxx 方法是 React 提供給你修改狀態的函數,類似於類式組件的 setState

不過要注意很重要的一點是,useState 的 set 方法並不像類式組件的 setState ,它不會將舊的 state 和新修改的 state 合併,所以當你修改新的 state 卻沒有傳入舊的 state 時,之前的 state 會不見,如果要將舊的 state 也保留下來可以這麼寫:

SetDate((prev) => ({
  ...prev,
  count: 10
}))

setState 動態修改 key 名

假設我們今天有兩個輸入框,當我們修改輸入框中的值,第一個輸入框的值會修改 start 這個狀態,第二個輸入框的值則會修改 end 狀態,我們可以這麼去寫:

<Input type="text" placeholder="start" value={date.start} onChange={(e) => handleChange(e.target.value, 'start')}></input>
<Input type="text" placeholder="end" value={date.end} onChange={(e) => handleChange(e.target.value, 'end')}></input>

將 handleChange 方法定義為:

const handleChange = (val, key) => {
  setDate((prev) => ({
    ...prev,
    [key]: val,
  }));
};

如此一來便能使用同一個方法來修改不同的 state 值。

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論