react实现对数组做增删改操作自定义hook

需求

实现对数组的增删改操作。

实现

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 (
		

			{list}
			 { addItem(4) }}>增
			 { removeItem(1) }}>删
			 { updateItem(0, 5) }}>改
		
	);
}

export default Array;

参考

React好玩的自定义hook-useArray_哔哩哔哩_bilibili