React Hook更新state数组

Posted hanlinbaiyu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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"
      }
    ]);
  }

以上是关于React Hook更新state数组的主要内容,如果未能解决你的问题,请参考以下文章

如何将 react-hook-form 用于嵌套数组

react hook介绍

react hook介绍

react之Hook的useEffect详解

前端学习(3288):react hook state-hook

使用React useContext hook进行分派调用后,反应状态不会更新