React Hook更新state数组

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"
      }
    ]);
  }
文章来自:https://www.cnblogs.com/hanlinbaiyu/p/12120589.html
© 2021 jiaocheng.bubufx.com  联系我们
ICP备案:鲁ICP备09046678号-3