Question

我正在创建一个Dialog组件，该组件应在打开时更改url（例如，基本url为/ fruits，当我按下香蕉按钮时，Dialog组件将呈现，路径为/fruits/banana）。

我正在使用带有react和react-router的离子来做到这一点。对话框组件包含离子模式。

我的问题是模式未打开，但是我在devTools中看到模式（显示）的状态设置为true。当我直接将devTool的状态设置为false时，会引发异常：

createOverlayComponent.js:125 Uncaught (in promise) TypeError: Cannot read property 'dismiss' of undefined
    at ReactControllerComponent._callee$ (createOverlayComponent.js:125)
    at tryCatch (runtime.js:45)
    at Generator.invoke [as _invoke] (runtime.js:264)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:3000/static/js/10.chunk.js:52661:21)
    at createOverlayComponent.js:33
    at new Promise (<anonymous>)
    at push../node_modules/@ionic/react/dist/components/createOverlayComponent.js.__awaiter (createOverlayComponent.js:10)
    at ReactControllerComponent.componentDidUpdate (createOverlayComponent.js:80)
    at commitLifeCycles (react-dom.development.js:18130)
    at commitAllLifeCycles (react-dom.development.js:19674)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at commitRoot (react-dom.development.js:19898)
    at react-dom.development.js:21446
    at Object.unstable_runWithPriority (scheduler.development.js:255)
    at completeRoot (react-dom.development.js:21445)
    at performWorkOnRoot (react-dom.development.js:21368)
    at performWork (react-dom.development.js:21273)
    at performSyncWork (react-dom.development.js:21247)
    at requestWork (react-dom.development.js:21102)
    at scheduleWork (react-dom.development.js:20915)
    at overrideProps (react-dom.development.js:21760)
    at e.value (backend.js:1)
    at backend.js:1
    at Array.forEach (<anonymous>)
    at backend.js:1
    at Array.forEach (<anonymous>)
    at t.value (backend.js:1)
    at e (backend.js:1)

但是，当我手动设置为true时，它可以工作（现在，当我再次尝试时，false也可以）。

App组件：

import React, { useState } from 'react';
import '@ionic/core/css/core.css';
import '@ionic/core/css/ionic.bundle.css';
import Dialog from './components/dialog';
import { IonButton } from '@ionic/react';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default () => {
  const [showParent, setShowParent] = useState(0);

  const onDidDismiss = (data) => {
    console.log(data);
  }


  const Modal = () => (
    <Dialog show={showParent} onDidDismiss={(data) => onDidDismiss(data)}>
      <span>first dialog</span>
    </Dialog>
  );

  return (
    <Router>
      <div>
        <IonButton>
          <Link to="/dialog" onClick={() => { setShowParent(true); console.log("check") }}>
            click !
          </Link>
        </IonButton>
        <Switch>
          <Route path='/dialog' component={Modal} />
        </Switch>
      </div>
    </Router>
  );
};

对话框组件：

import React from 'react'
import { IonModal } from '@ionic/react';

export default ({ show, onDidDismiss, height, width, children } = {}) => {
    const style = {
        height,
        width
    }

    return (
        <IonModal style={style}
            isOpen={show}
            onDidDismiss={(data) => {onDidDismiss(data); console.log("dialog check")}}
        >
            <div>
                {children}
            </div>
        </IonModal>
    );
}

为什么会发生？也许有present（）吗？

IonModal无法通过react-router打开

0 个答案: