我正在显示歌曲列表，如果当前用户已经上传了特定的歌曲，但我被困在删除路线上，我可以选择删除这些歌曲

Question

这是组件

import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { deleteSong, getSongs } from '../../store/song';
import ReactAudioPlayer from 'react-audio-player';

const SongList = () => {
const dispatch = useDispatch();
const songsObj = useSelector((state) => state.songState.entries);
const songs = Object.values(songsObj)
const user = useSelector((state) => state.session.user);
const CurrentUserId = user?.id
const userSongs = songs.filter(song => song.userId === CurrentUserId)
const remove = async () => {
const songId = 10
dispatch(deleteSong(songId));
}
useEffect(() => {
dispatch(getSongs());
}, [dispatch]);

return (
<div>
<h1>Song List</h1>
<ol>
{songs.map(({ id, songName, songLink, userId }) => (
<div className='songdetails' key={id}>
<p key={id}>songName={songName}</p>
{userId === CurrentUserId ?
<div>
<button id={id} onClick={remove}>remove</button>
</div>
: null}
</div>
))}
</ol>
</div>
);
};
export default SongList;

这些是的路线

router.get('/', asyncHandler(async (req, res) => {
const songs = await Song.findAll();
res.json(songs);
}));
router.post('/:id', requireAuth, songValidations.validateCreate, asyncHandler(async (req, res) => {
const song = await Song.create(req.body);
return res.json(song);
}));
router.delete('/:id', requireAuth, asyncHandler(async function (req, res) {
const song = await Song.findByPk(req.params.id)
if (!song) throw new Error('Cannot find song');
await Song.destroy({ where: { id: song.id } });
return song.id

}));

和商店

import { csrfFetch } from "./csrf";
const LOAD_SONGS = 'song/loadSongs';
const ADD_SONG = 'song/addSongs';
const REMOVE_SONG = 'song/removeSongs'
export const loadSongs = (songs) => ({
type: LOAD_SONGS,
songs
});
export const getSongs = () => async (dispatch) => {
const response = await fetch('/api/songs')
const songs = await response.json()
dispatch(loadSongs(songs))
return songs
}
export const addSong = (newSong) => ({
type: ADD_SONG,
newSong
});
export const postSong = (newSong) => async (dispatch) => {
const response = await csrfFetch(`/api/songs/${newSong.id}`, {
method: 'post',
body: JSON.stringify(newSong)
});
const song = await response.json();
if (response.ok) {
dispatch(addSong(song));
return song;
}
};
export const removeSong = (songId) => ({
type: REMOVE_SONG,
songId,
});

export const deleteSong = (songId) => async (dispatch) => {
console.log(songId, 'deleteSong song')
const response = await csrfFetch(`/api/songs/${songId}`, {
method: 'delete'
});
if (response.ok) {
const song = await response.json();
dispatch(removeSong(song.id));
}
};

const initialState = { entries: {} };

const songReducer = (state = initialState, action) => {
switch (action.type) {
case LOAD_SONGS: {
const newState = { ...state, entries: {} }
action.songs.forEach(song => {
newState.entries[song.id] = song
})
return newState
}
case ADD_SONG: {
return {
...state,
entries: {
...state.entries,
[action.newSong.id]: action.newSong
}
}
}
case REMOVE_SONG: {
const newState = { ...state, entries: { ...state.entries } };
delete newState.entries[action.songId];
return newState;
}
default:
return state;
}
};
export default songReducer;

特别是，我在获取要删除的特定歌曲时遇到了问题。我可以用删除选项来呈现用户的歌曲，但我应该如何告诉它我特别点击了哪首歌，这样它就知道要删除了。此外，该州也没有更新，但我认为这与我目前的问题有关。任何重构技巧都将不胜感激，这是我的第一个react项目。谢谢

Answer 1

...
const remove = (e) => {
dispatch(deleteSong(e.target.id))
}
...
return (
...

<button id={id} onClick={remove}>remove</button>