单击删除时会抛出错误未知事件处理程序属性"onDelete"

Question

系统在单击主屏幕中的delete图标时抛出以下错误，并且删除播放器没有发生。

Warning: Unknown event handler property `onDelete`. It will be ignored.
in div (created by ForwardRef(Modal))
in ForwardRef(Portal) (created by ForwardRef(Modal))
in ForwardRef(Modal) (created by ForwardRef(Dialog))

Home.js

const [deleteDialog, setDeleteDialog] = useState(false);
const [playerId, setPlayerId] = useState("");
const deletePlayer = (id) => e => {
setPlayerId(id);
setDeleteDialog(true);
}
const onDelete = id => () => {
try {
Axios.delete('http://localhost:8000/service/player', id);
setDeleteDialog(false);
} catch (e) {
console.log(e);
}
}
return (
<div className="App">
<div className="wrapper">
<div className="playerList_header">
<h1>Players</h1>
</div>
<div className="playerList_home_page">
<div className="grid-container">
{
searchResults.map(({ id, image, position, name }) => (
<div key={id} className="grid-item">
{
deleteIcon.show && (
<span className="deletePlayerButton" onClick={deletePlayer(id)}>
<img className="deletePlayerimg" src="/images/delete.png"></img>
</span>
)}
<div>
<img alt="" className="playerProfilePic_home_tile" key={image} src={image}></img>
</div>
<div className="playerProfile_grid_border">
<span className="rec_name_position_data">
<h3 key={name}>{name}</h3>
<span className="playerPosition_home_tile" key={position}>{position}</span>
</span>
</div>              
</div>
))
}
</div>
</div>
</div>
<AlertDialog
onDelete={onDelete(playerId)}
open={deleteDialog}
onClose={() => setDeleteDialog(false)}
playerId={playerId}
/>
</div>
);

Dialog.js

在"Yes"按钮上onClick={ onDelete(playerId) }

export default function AlertDialog({ open, onClose, onDelete, playerId }) {
return (
<Dialog
open={open}
onClose={onClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>
<DialogTitle id="alert-dialog-title">{"Delete the player ?"}</DialogTitle>
<DialogContent>
<DialogContentText id="alert-dialog-description">
Pressing Yes will delete the player with ID {playerId}.
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={onClose} color="primary">
No
</Button>
<Button onClick={ onDelete(playerId) } color="primary" autoFocus>
Yes
</Button>
</DialogActions>
</Dialog>
);
}

Server.js

app.delete('/service/player', async (req, res) => {
try {
const userId = req.body.id;
console.log("UserId"+userId);
const deletePlayer = await UserModel.destroy({
where:{ id : userId }
})
res.status(200).json({ deletePlayer });
} catch (e) {
res.status(500).json({ fail: e.message });
}
});

Answer 1

确保将playerId传递给onDelete方法

第一种方式，因为您的onDelete函数在函数内部有一个函数。只需调用onDelete并传递玩家ID

<Button onClick={onDelete(playerId)} color="primary" autoFocus>
Yes
</Button>

第二种方式正确重写onDelete。没有必要把乐趣放在乐趣中。

const onDelete = id => {
try {
Axios.delete('http://localhost:8000/service/player', id);
setDeleteDialog(false);
} catch (e) {
console.log(e);
}
}

现在只需调用提供一个内联箭头函数来点击

<Button onClick={() => onDelete(playerId)} color="primary" autoFocus>
Yes
</Button>

Answer 2

<Dialog
open={open}
onClose={onClose}
onDelete={onDelete}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description"
>

对话框组件没有道具onDeletehttps://material-ui.com/api/dialog/