需求
实现对数组的增删改操作。文章来源：https://www.toymoban.com/news/detail-652373.html
实现
import { useState } from 'react';
const useArray = (currList) => {
const [list, setList] = useState(currList);
// 增
const addItem = (item) => {
setList([...list, item]);
};
// 删
const removeItem = (idx) => {
const _arr = [...list]; // 浅复制
// 针对数组不能直接修改原数组，而是应该传递一个修改之后的新的数组引用
_arr.splice(idx, 1);
setList(_arr);
};
// 改
const updateItem = (idx, newItem) => {
const _arr = [...list];
_arr[idx] = newItem;
setList(_arr);
};
return {
list,
addItem,
removeItem,
updateItem,
}
}
function Array() {
const { list, addItem, removeItem, updateItem } = useArray([1, 2, 3]);
return (
<div className="App">
{list}
<button onClick={() => { addItem(4) }}>增</button>
<button onClick={() => { removeItem(1) }}>删</button>
<button onClick={() => { updateItem(0, 5) }}>改</button>
</div>
);
}
export default Array;实现效果
参考
React好玩的自定义hook-useArray_哔哩哔哩_bilibili文章来源地址https://www.toymoban.com/news/detail-652373.html
到了这里，关于react实现对数组做增删改操作自定义hook的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
