Reactjs -通过按钮更改随机数组中的项目

import React, { useState } from 'react';

function RandomArrayChanger() {
  // 初始化状态，包含一个数组
  const [items, setItems] = useState(['苹果', '香蕉', '橙子', '葡萄']);

  // 定义一个函数来处理按钮点击事件
  const handleClick = () => {
    // 创建一个新数组副本以避免直接修改状态
    const newItems = [...items];
    
    // 获取一个随机索引
    const randomIndex = Math.floor(Math.random() * newItems.length);
    
    // 更改随机索引处的项目
    newItems[randomIndex] = `新项目-${Math.random().toString(36).substring(7)}`;
    
    // 更新状态
    setItems(newItems);
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <button onClick={handleClick}>更改随机项目</button>
    </div>
  );
}

export default RandomArrayChanger;