需求

實現對數組的增刪改操作。

實現

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