Блог

Я использую React с NextJS

Что я хочу сделать, так это иметь возможность отправлять функцию с параметрами в мой компонент «Оповещения», чтобы он мог дождаться отзывов пользователей перед выполнением функции.

Например, перед очисткой списка я хочу убедиться, что пользователь может подтвердить, прежде чем фактически запускать функцию.

Итак, в основном все начинается с этой строки кода

 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 компоненту react, который будет генерировать предупреждения начальной загрузки для каждого предупреждения, которое у меня есть в этом массиве.

Довольно стандартные вещи.

Для краткости, вот где «methodToExecute» используется в моей функции оповещения. Просто не хотел бомбардировать вас кодом, который может быть неуместен, дайте мне знать, если мне нужно вставить больше.

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

Однако текущий код не работает. Есть ли проблема с синтаксисом, который я изначально использую, чтобы вставить свою функцию в новый объект оповещения? Или это что-то другое?

Я прошел и зарегистрировал «methodToExecute», и, как ни странно, когда я регистрирую его, он фактически возвращает родительскую функцию, в которой вызывается эта первая строка кода.

Спасибо за любую помощь! Дайте мне знать, если мне нужно добавить что-то из кода, который я исключаю!

Основываясь на вашем 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>