你可以使用useEffect。它会观察模式是否打开，然后在模式中显示步骤。
1.将modalOpen添加到状态以跟踪模态是否打开。
1.使用useEffect观察modalOpen中的更改。
1.当模态打开时，更新步骤索引以显示模态内的步骤。
1.更新回调函数以打开模态，并在到达正确的步骤（stepIndex3）时设置modalOpen。
现在，当模态打开时，Joyride应该只显示模态内的步骤，修复警告并按预期显示步骤。
以下是细分：
首先，在state中添加一个modalOpen属性：

`
    const [state, setState] = useState({
    run: false,
    loading: false,
    stepIndex: 0,
    modal open: false,
    });
`

添加useEffect以等待'modalOpen'：

`
    useEffect(() => {
      if (state.modalOpen) {
        setState((prevState) => ({
          ...prevState,
          run: true,
          stepIndex: 4,
        }));
      }
    }, [state.modalOpen]);
`

最后更新handleJoyrideCallback函数，使其在到达stepIndex 3时设置modalOpen：

`
    const handleJoyrideCallback = (data) => {
    const { action, index, status, type } = data;

  if ([EVENTS.STEP_AFTER, EVENTS.TARGET_NOT_FOUND].includes(type)) {
    setState((prevState) => ({
      ...prevState,
      run: false,
      loading: true,
    }));

    setTimeout(() => {
      setState((prevState) => ({
        ...prevState,
        loading: false,
        run: true,
        stepIndex: index + (action === ACTIONS.PREV ? -1 : 1),
      }));
    }, 2000);
  } else if ([STATUS.FINISHED, STATUS.SKIPPED].includes(status)) {
    setState((prevState) => ({ ...prevState, run: false }));
    setJoyride(false);
  } else if (type === EVENTS.TOOLTIP_CLOSE) {
    setState((prevState) => ({ ...prevState, stepIndex: index + 1 }));
  }

  if (action === ACTIONS.NEXT && index === 3) {
    openModal(true);
    setState((prevState) => ({ ...prevState, modalOpen: true }));
  }
};

`