在react js中创建动态数组

import React, { useState } from 'react';

const DynamicArrayComponent = () => {
  const [array, setArray] = useState([]); // 初始化一个空数组作为初始状态

  const addElement = () => {
    setArray([...array, 'New Element']); // 添加一个新元素到数组中
  };

  const removeElement = (index) => {
    const newArray = [...array];
    newArray.splice(index, 1); // 从数组中删除指定位置的元素
    setArray(newArray);
  };

  const updateElement = (index, newValue) => {
    const newArray = [...array];
    newArray[index] = newValue; // 更新指定位置的元素
    setArray(newArray);
  };

  return (
    <div>
      <button onClick={addElement}>Add Element</button>
      <ul>
        {array.map((element, index) => (
          <li key={index}>
            {element}
            <button onClick={() => removeElement(index)}>Remove</button>
            <button onClick={() => updateElement(index, 'Updated Element')}>Update</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default DynamicArrayComponent;