上篇 Day 09 跟大家介紹了 State 為何？所以今天就要來看看如何利用 setState() 這個方法修改或更新 State 物件內的值囉。

setState()

用來修改或更新 Class Component 內 state 物件的一個方法。

即便 state 本身是一個物件但是我們依舊要使用 React.js 提供的 setState() 方法才能夠成功修改其值，成功修改完值後才能觸發頁面的重新渲染呈現目前狀態和資料最新的內容。那我們就直接來看範例要怎麼使用這個方法以及 React.js 官網中特別提到的注意事項吧！

setState() 應用

// state 物件的值
this.state={
    name: 'Angela'
}

// 修改 state 物件中的 name 屬性
this.setState({name: 'Sabrina'});

上面程式碼就是一個使用 setState() 方法去修改 state 裡面值的簡單範例。當然我們實際應用的時候大部分都會比上面的範例要更複雜一些，所以這時候就需要特別注意使用上的一些小狀況了。

setState() 的注意事項

1. 不可以直接修改 state

// 錯誤寫法
this.state.comment = 'Hello';

// 正確寫法
this.setState({comment: 'Hello'});

在上面的引言中我們已經有提到過不可以直接去修改 state 物件本身，如果需要修改的話都一定要透過 setState() 這個方法，使用 this.state.屬性 去做修改的話是會出現錯誤的，而且畫面也不會做重新渲染（ Re-render ）的動作。

2. state 的更新是非同步的

在官方文件中針對 setState() 這個方法有特別提到以下的說明：

setState() 並不會總是馬上更新 component。它有可能會將其分批處理更新或延遲到稍後才更新。所以請把 setState() 想成一個請求而非一個馬上對 component 進行更新的指令。

所以透過文件的說明其實我們可以發現 setState() 這個方法中帶有兩個參數：第一個為帶有 state 和 props 的 updater 函式，第二個參數則是非必要的一個 Callback 函式，它只有在 setState() 方法完成且成功的重新渲染該元件之後才會執行。因此如果我們要確保能操作到確實更新後的 state 值的話，就可以將要撰寫的方法寫在第二個參數的 Callback 函式中。

/* setState() 方法中的參數 */
this.setState((state, props) => { stateChange }[, callback]);

3. 可以變更 state 內個別的值

// Class Component 內部的 constructor
constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

從官網的範例中可以看到，我們能夠在 state 當中存入多個變數的值。當要修改或更新裡面某一個變數時，可以針對個別的變數做修改即可，沒有動到的變數會保留原來的值不變更。

componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

所以在更新 state 的值時就變得很方便！因為它們的更新都是個別獨立的不需要去注意其他的變數，當然前提是你沒有去動到它的話。

備註：上方範例中的 componentDidMount() 這個方法會在之後的生命週期的篇幅為大家說明和介紹。

關於 setState() 修改值的方法和小細節就介紹到這邊了，明天我們總算要進入到 React.js 生命週期的篇章囉～
歡迎大家留言分享或是指教唷！
那我們下篇見ʘ‿ʘ