如何在ReactJS中使用列表创建播放列表

import React, { useState } from 'react';

function Playlist() {
  const [songs, setSongs] = useState([]);
  const [newSong, setNewSong] = useState('');
  
  // 其他逻辑代码
  
  return (
    // JSX代码
  );
}

<input type="text" value={newSong} onChange={e => setNewSong(e.target.value)} />
<button onClick={() => setSongs([...songs, newSong])}>添加歌曲</button>

<ul>
  {songs.map((song, index) => (
    <li key={index}>{song}</li>
  ))}
</ul>

import React, { useState } from 'react';

function Playlist() {
  const [songs, setSongs] = useState([]);
  const [newSong, setNewSong] = useState('');

  return (
    <div>
      <input type="text" value={newSong} onChange={e => setNewSong(e.target.value)} />
      <button onClick={() => setSongs([...songs, newSong])}>添加歌曲</button>
      <ul>
        {songs.map((song, index) => (
          <li key={index}>{song}</li>
        ))}
      </ul>
    </div>
  );
}

export default Playlist;