如何在react中遍历数据并为状态数组赋值

import React, { useState } from 'react';

function App() {
  const initialData = [
    { id: 1, name: 'John' },
    { id: 2, name: 'Jane' },
    { id: 3, name: 'Bob' }
  ];

  const [data, setData] = useState(initialData);

  const handleButtonClick = () => {
    // 遍历数据并为状态数组赋值
    const updatedData = data.map(item => {
      return { ...item, age: Math.floor(Math.random() * 30) };
    });

    setData(updatedData);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>更新数据</button>
      <ul>
        {data.map(item => (
          <li key={item.id}>
            {item.name} - {item.age ? item.age : '未知年龄'}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;