实现一个 useArray Hook，它管理一个带有附加实用方法的项目数组。
使用 useArray 比使用普通的 useState 更方便，因为在后一种情况下，你总是需要创建一个新数组，改变它，然后设置状态来使用新数组，这可能非常麻烦。
该 Hook 应该可以通用地处理任何类型的数组。
const defaultValue = ['apple', 'banana'];export default function Component() {const { array, push, update, remove, filter, set, clear } = useArray();return (<div><p>Fruits: {array.join(', ')}</p><button onClick={() => push('orange')}>Add orange</button><button onClick={() => update(1, 'grape')}>Change second item to grape</button><button onClick={() => remove(0)}>Remove first</button><button onClick={() => filter((fruit) => fruit.includes('a'))}>Keep fruits containing 'a'</button><button onClick={() => set(defaultValue)}>Reset</button><button onClick={clear}>Clear list</button></div>);}
defaultValue: 项目的初始数组该 Hook 返回一个具有以下属性的对象：
array: 当前的项目数组set: (newArray) => void: 一个设置项目数组的函数。这必须与 useState 的 setter 函数的类型相同push: (item) => void: 一个将项目添加到数组末尾的函数remove: (index: number) => void: 一个通过 index 从数组中删除项目的函数filter: (predicate) => void: 一个基于谓词函数过滤数组的函数。predicate 必须与 Array.prototype.filter 的参数类型相同update: (index: number, newItem) => void: 一个替换数组中 index 处的项目的函数clear: () => void: 一个清除数组的函数实现一个 useArray Hook，它管理一个带有附加实用方法的项目数组。
使用 useArray 比使用普通的 useState 更方便，因为在后一种情况下，你总是需要创建一个新数组，改变它，然后设置状态来使用新数组，这可能非常麻烦。
该 Hook 应该可以通用地处理任何类型的数组。
const defaultValue = ['apple', 'banana'];export default function Component() {const { array, push, update, remove, filter, set, clear } = useArray();return (<div><p>Fruits: {array.join(', ')}</p><button onClick={() => push('orange')}>Add orange</button><button onClick={() => update(1, 'grape')}>Change second item to grape</button><button onClick={() => remove(0)}>Remove first</button><button onClick={() => filter((fruit) => fruit.includes('a'))}>Keep fruits containing 'a'</button><button onClick={() => set(defaultValue)}>Reset</button><button onClick={clear}>Clear list</button></div>);}
defaultValue: 项目的初始数组该 Hook 返回一个具有以下属性的对象：
array: 当前的项目数组set: (newArray) => void: 一个设置项目数组的函数。这必须与 useState 的 setter 函数的类型相同push: (item) => void: 一个将项目添加到数组末尾的函数remove: (index: number) => void: 一个通过 index 从数组中删除项目的函数filter: (predicate) => void: 一个基于谓词函数过滤数组的函数。predicate 必须与 Array.prototype.filter 的参数类型相同update: (index: number, newItem) => void: 一个替换数组中 index 处的项目的函数clear: () => void: 一个清除数组的函数useArray hook 可以通过将数组存储在 useState 状态中来实现，并根据状态的 setter 函数定义实用程序方法，使用 JavaScript 的内置数组方法来操作数组。
请记住将实用程序方法包装在 useCallback 中，以防止调用组件不必要的重新渲染。
import { Dispatch, SetStateAction, useCallback, useState } from 'react';interface UseArrayReturn<T> {array: T[];set: Dispatch<SetStateAction<T[]>>;push: (element: T) => void;filter: (callback: (value: T, index: number, array: T[]) => boolean) => void;update: (index: number, newElement: T) => void;remove: (index: number) => void;clear: () => void;}export default function useArray<T>(defaultValue: T[]): UseArrayReturn<T> {const [array, setArray] = useState(defaultValue);const push: UseArrayReturn<T>['push'] = useCallback((element) => setArray((a) => [...a, element]),[],);const filter: UseArrayReturn<T>['filter'] = useCallback((callback) => setArray((a) => a.filter(callback)),[],);const update: UseArrayReturn<T>['update'] = useCallback((index, newElement) =>setArray((a) => [...a.slice(0, index),newElement,...a.slice(index + 1, a.length),]),[],);const remove: UseArrayReturn<T>['remove'] = useCallback((index) =>setArray((a) => [...a.slice(0, index), ...a.slice(index + 1, a.length)]),[],);const clear: UseArrayReturn<T>['clear'] = useCallback(() => setArray([]), []);return { array, set: setArray, push, filter, update, remove, clear };}
确保您实现的实用程序方法以不可变的方式修改数组，因为 React 中的状态不应被更改。
console.log() 语句将显示在此处。