Как перезапустить React Joyride Tour после его завершения в функциональном компоненте?

Question

Я пытаюсь вернуть для атрибута run Joyride значение false после завершения тура, но не знаю, как это сделать. Я пробовал использовать их функции обратного вызова, но не могу найти примера, когда вы используете функциональные компоненты. Вот мой код для компонента Joyride:

<Joyride
    run={run}
    steps={steps}
    debug
    continuous
    showSkipButton
    showProgress
    callback={handleJoyrideCallback()}
    styles={{
      options: {
        arrowColor: theme.palette.common.white,
        primaryColor: theme.palette.secondary.main,
        textColor: theme.palette.primary.dark,
        width: 500,
        zIndex: 10000,
      },
      buttonNext: {
        backgroundColor: theme.palette.secondary.main,
        border: "none",
        borderRadius: 0,
        color: theme.palette.common.white,
        "&:focus": {
          outline: "none !important",
        },
      },
      buttonBack: {
        color: theme.palette.primary.dark,
        marginLeft: "auto",
        marginRight: 5,
      },
      buttonClose: {
        color: theme.palette.primary.dark,
        height: 14,
        padding: 15,
        position: "absolute",
        right: 0,
        top: 0,
        width: 14,
      },
    }}
  />

А вот функция обратного вызова:

const handleJoyrideCallback = (data) => {
const { status, type } = data;
const finishedStatuses = [STATUS.FINISHED, STATUS.SKIPPED];
if (finishedStatuses.includes(status)) {
  setRun(false);
}

};

И материал для setRun:

  const [run, setRun] = useState(false);

Answer 1

Это потому, что вы вызываете функциюhandleJoyrideCallback in callback={handleJoyrideCallback()}

Вам следует использовать:callback={handleJoyrideCallback}