打造你的 React 神器：自定義 Hook 實現超強大的陣列操作！

import { useState } from 'react';

function useArrayState(initialArray = []) {
  const [array, setArray] = useState(initialArray);

  const push = (element) => {
    setArray((a) => [...a, element]);
  };

  const remove = (index) => {
    setArray((a) => a.filter((_, i) => i !== index));
  };

  const update = (index, newElement) => {
    setArray((a) => a.map((el, i) => (i === index ? newElement : el)));
  };

  const clear = () => {
    setArray([]);
  };

  return {
    array,
    setArray,
    push,
    remove,
    update,
    clear,
  };
}

export default useArrayState;

import React from 'react';
import useArrayState from './useArrayState';

function TodoList() {
  const { array: todos, push, remove, update, clear } = useArrayState([]);

  const addTodo = () => {
    const newTodo = prompt('Enter a new todo:');
    if (newTodo !== null) {
      push(newTodo);
    }
  };

  const editTodo = (index) => {
    const updatedTodo = prompt('Update the todo:', todos[index]);
    if (updatedTodo !== null) {
      update(index, updatedTodo);
    }
  };

  return (
    <div>
      <h1>Todo List</h1>
      <button onClick={addTodo}>Add Todo</button>
      <button onClick={clear}>Clear All</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => editTodo(index)}>Edit</button>
            <button onClick={() => remove(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;