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 值。

About
Latest Posts

pluto

懶癌末期患者，正以經營博客治癒。

類式組件修改 state

函式組件修改 state

setState 動態修改 key 名

相關文章: