[ Day 10 ] setState() 的用法

上篇 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 生命周期的篇章罗～
欢迎大家留言分享或是指教唷！
那我们下篇见ʘ‿ʘ