单击删除会引发错误未知事件处理程序属性`onDelete`

Posted 2023-02-22

【中文标题】单击删除会引发错误未知事件处理程序属性`onDelete`

【英文标题】：On click on delete throws error Unknown event handler property `onDelete`

【发布时间】：2020-09-23 11:04:11

【问题描述】：

单击主屏幕中的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  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 );
   
);

【参考方案1】：

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

对话框组件没有 prop onDelete https://material-ui.com/api/dialog/

【讨论】：

谢谢，现在错误已解决，但删除播放器并没有发生。

@soccerway Axios 请求开始了吗？或者控制台中的任何错误？

对不起，我还有一个错误，没看到。 findDOMNode 在 StrictMode 中已弃用。 findDOMNode 被传递了一个在 StrictMode 中的 Transition 实例。相反，直接将 ref 添加到要引用的元素。在 Transition (由 ForwardRef(Fade) 创建) 在 ForwardRef(Fade) (由 ForwardRef(Backdrop) 创建) 在 ForwardRef(Backdrop) (由 WithStyles(ForwardRef(Backdrop)) 创建) 在 WithStyles(ForwardRef(Dialog)) (在 Dialog .js:11) 在 AlertDialog (at Home.js:124) div (at Home.js:78)

【参考方案2】：

确保将playerId 传递给onDelete 方法

第一种方式 由于您的 onDelete 函数在函数内部有一个函数。只需拨打onDelete 并传递playerId

       <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);
    
  

现在只需调用为 onClick 提供一个内联箭头函数

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

【讨论】：

当我删除const onDelete = id => () => ... 并按照建议的const onDelete = id => 进行更正时，它会抛出错误：重新渲染过多。 React 限制了渲染的数量以防止无限循环。并点这里.. ReactDOM.render(React.createElement(App, null), document.getElementById('root'));

@soccerway，如果您正在尝试第二个选项，您必须将所有 onDelete(playerId) 更改为 () => onDelete(playerId)，因为您正在使用它 2 个位置，第一个使用 Dialog，第二个使用 Button，您可能只改了一处

我已经改变了两个地方，在 Home <AlertDialog onDelete=() => onDelete(playerId) open=deleteDialog onClose=() => setDeleteDialog(false) playerId=playerId /> 然后 onDelete(playerId) color="primary" autoFocus>

在家里它应该看起来像：<AlertDialog onDelete=onDelete，仍然在 Dialog.js 里面有两个地方正在使用它，正如我上面提到的评论

我在 server.js 行 const userId = req.body.id; 中设置了一个断点，同时加载自身，操作在断点设置处变为活动状态（无需单击删除图标）并变为未定义错误，createError .js:16 Uncaught (in promise) 错误：请求失败，状态码 500 at createError (createError.js:16) at set (settle.js:17)