React Hook更新state數組

Hook是React16.8新加特性，如果你看過官網所給出的例子，那么你會對如何更新Number、String類型的state有一定了解。但是當state是數組的時候，要怎么更新呢？

我們先直觀的看一個代碼示例：

import React, { useState } from "react";
import ReactDOM from "react-dom";
function Example() {
  const [todos, setTodos] = useState([{ text: "Learn Hooks" }]);
  const addItems = () => {
    setTodos([
      ...todos,
      {
        text: "Learn Hooks"
      }
    ]);
  };
  return (
    <div>
      <ul>
        {todos.map((item, index) => {
          return (
            <li key={index}>
              {item.text}-{index}
            </li>
          );
        })}
      </ul>
      <button onClick={addItems}>Add Item</button>
    </div>
  );
}
ReactDOM.render(<Example />, document.getElementById("container"));

 

這個state的更新函數

setTodos

沒有把修改原來的todos，而是組了新的數組覆蓋，這不同於class類里面的this.setState的方式

這個新的數組，使用了ES6中的擴展運算符(...)拷貝已存在的項到新的數組，並且把新項插入到最后。

還有一個需要注意一點，這個例子中使用const和箭頭函數，其實使用普通函數也可以，普通函數與箭頭函數最大的區別是它們處理this不同，但是這里沒有看見this,因為沒有使用class。

 function addItems() {
    setTodos([
      ...todos,
      {
        text: "Learn Hooks"
      }
    ]);
  }