BFE.devAI解答 - React 代码题
12. useArray()

以下是实现 useArray()的代码示例：

import { useState } from "react"function useArray(initialArray: any[]) {  const [array, setArray] = useState(initialArray)  function push(item: any) {    setArray([...array, item])  }  function removeByIndex(index: number) {    const newArray = [...array]    newArray.splice(index, 1)    setArray(newArray)  }  return {    value: array,    push,    removeByIndex,  }}export default useArray

使用示例：

import useArray from "./useArray"function ExampleComponent() {  const { value, push, removeByIndex } = useArray([1, 2, 3])  function handlePush() {    push(4)  }  function handleRemove(index: number) {    removeByIndex(index)  }  return (    <div>      <ul>        {value.map((val: any, index: number) => (          <li key={index}>            {val}             <button onClick={() => handleRemove(index)}>Remove</button>          </li>        ))}      </ul>      <button onClick={handlePush}>Push</button>    </div>  )}export default ExampleComponent

在上面的示例中，我们创建了一个 useArray() hook，该 hook 接收一个初始数组并返回一个包含当前数组、push 和 removeByIndex 方法的对象。

push() 方法将项目添加到数组中，而 removeByIndex() 方法可根据指定的下标从数组中删除项目。

在 ExampleComponent 中，我们使用 useArray() hook 来初始化数组，并定义了两个处理方法： handlePush 和 handleRemove 来处理插入和删除操作。在 render() 函数中，我们显示数组中的每个项目，并在每个项目旁边添加了一个删除按钮。同时，我们还为 push 方法创建了一个按钮。