使用 React，我无法将带有参数的函数发送到我的组件之一

Question

我将 React 与 NextJS 结合使用

我想做的是能够将具有参数的函数发送到我的 'Alerts' 组件，以便它可以在执行该函数之前等待用户反馈。

例如，在清空列表之前，我想确保用户在实际触发该功能之前可以确认。

所以，基本上就是从这行代码开始的

pushAlert(closeAlert, "New List Warning", "Generating a new list will erase all unlocked instruments. Would you like to continue?", "danger", () => {generateNewList(min, max)}, undefined, false)

关注第五个道具，'() => {generateNewList(min, max)}' 部分。另外，min和max都是父函数传入的参数

这是 pushAlert 的样子

const pushAlert = (onClosing, alertHeading, alertText, alertVariant, methodToExecute, buttonText, buttonless) => {
        setAlerts([...alerts, {
            "key": keyInc,
            "onClosing": onClosing,
            "alertHeading": alertHeading,
            "alertText": alertText, 
            "alertVariant": alertVariant, 
            "methodToExecute": methodToExecute,
            "buttonText": buttonText,
            "buttonless": buttonless
        }])

        setKeyInc(keyInc + 1)

        console.log(methodToExecute)
    }

基本上，我将所有警报存储在一个数组中，然后我将这些 JS 对象发送到一个反应组件，该组件将为该数组中的每个警报生成 bootstrap 个警报。

相当标准的东西。

为了简洁起见，这里是我的警报功能中使用 'methodToExecute' 的地方。只是不想用可能不相关的代码轰炸你，让我知道我是否需要粘贴更多内容。

<Button variant={alert.alertVariant} onClick={()=> {alert.methodToExecute != undefined ? alert.methodToExecute : onClosing(alert.key)}}>{alert.buttonText != undefined ? alert.buttonText : 'OK'}</Button>

但是当前代码不起作用。我最初用于将函数推送到新警报对象的语法是否存在问题？还是其他原因？

我已经完成并记录了 'methodToExecute' 并且奇怪的是，当我记录它时，它实际上 returns 调用第一行代码的父函数。

感谢您的帮助！让我知道我是否需要添加我排除的一些代码！

Answer 1

根据您的 Button 代码，您似乎根本没有调用 methodToExecute 回调函数。

<Button
  variant={alert.alertVariant}
  onClick={() => {
    alert.methodToExecute != undefined 
      ? alert.methodToExecute // <-- not invoked!!
      : onClosing(alert.key);
  }}
>
  {alert.buttonText != undefined ? alert.buttonText : 'OK'}
</Button>

鉴于：

pushAlert(
  closeAlert,
  "New List Warning",
  "Generating a new list will erase all unlocked instruments. Would you like to continue?",
  "danger",
  () => { generateNewList(min, max); },
  undefined,
  false
)

第五个参数是一个函数，应该在按钮的 onClick 处理程序中调用。

<Button
  variant={alert.alertVariant}
  onClick={() => {
    alert.methodToExecute != undefined 
      ? alert.methodToExecute() // <-- invoked!!
      : onClosing(alert.key);
  }}
>
  {alert.buttonText != undefined ? alert.buttonText : 'OK'}
</Button>

使用 React，我无法将带有参数的函数发送到我的组件之一

Using React, I'm having trouble sending a function with parameters to one of my components

javascript

reactjs

react-bootstrap

next.js