React:映射数据

import React from 'react';

const data = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

function ListItem({ item }) {
  return <li key={item.id}>{item.name}</li>;
}

function List() {
  return (
    <ul>
      {data.map(item => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
}

export default List;

<ul>
  {data.map(item => (
    <ListItem key={item.id} item={item} />
  ))}
</ul>

function App() {
  const [data, setData] = React.useState([
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ]);

  const handleClick = () => {
    setData([...data, { id: 4, name: 'David' }]);
  };

  return (
    <div>
      <List data={data} />
      <button onClick={handleClick}>Add Item</button>
    </div>
  );
}