React Hook如何更新数组state
原创React Hook如何更新数组state
原创
挥刀北上
修改于 2021-02-03 10:36:07
修改于 2021-02-03 10:36:07
代码可运行
运行总次数：0
代码可运行
在使用react hook做开发时，会碰到更新数组state的情况，该怎么做呢？看代码：
import React, { useState } from "react";
import ReactDOM from "react-dom";
function Example() {
const [todos, setTodos] = useState([{ 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>
<button onClick={reduceItems}>reduce Item</button>
</div>
);
}
ReactDOM.render(<Example />, document.getElementById("container"));完成addItems和reduceItems两个方法，分别是增加和减少数组。
react hook中的setTodos方法传入的数组会对原来的数据进行覆盖，这里需要注意传入的数组和原先的数组不能指向同一内存地址，也就是或setTodos方法的参数只能是todos的副本，而不能是引用，如果是引用则不会更新。
完成代码如下：
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"));在完成addItems的内部我们使用es6的扩展运算符克隆了旧数据，并追加了新的数组项，减法没有完成希望读者朋友可以试一试。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
