React Hook更新state数组

Posted 2020-11-25 hanlinbaiyu

Hook是React16.8新加特性

当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

没有把新值与旧值合并，而是用新的数组覆盖，这不同于class类里面的this.setState的方式

为了向数组中添加新项，我使用了ES6中的扩展运算符(...)拷贝已存在的项到新的数组，并且把新项插入到最后。

还有一个需要注意一点，这个例子中使用const和箭头函数，其实使用普通函数也可以，普通函数与箭头函数最大的区别是它们处理this不同，但是这里没有看见this,因为没有使用class。

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