React UseState布尔数组修改一个元素

import React, { useState } from 'react';

function App() {
  const [boolArray, setBoolArray] = useState([true, false, true]);

  const handleToggle = (index) => {
    const newArray = [...boolArray]; // 创建一个副本数组
    newArray[index] = !newArray[index]; // 修改特定元素的值
    setBoolArray(newArray); // 更新状态值
  };

  return (
    <div>
      {boolArray.map((value, index) => (
        <div key={index}>
          <span>{value.toString()}</span>
          <button onClick={() => handleToggle(index)}>Toggle</button>
        </div>
      ))}
    </div>
  );
}

export default App;