Question

我有以下功能react组件：

<script type="text/javascript">
    $("#salesitems_modal").on('hide.bs.modal', function () {
        //actions you want to perform after modal is closed.
    });
</script>

这是我的模态组件：

import React, { useEffect, useState } from 'react';

import MyModal from './components/Modal/Modal';
import "./App.css";

function App() {

    const [state, setState] = useState('');
    const [modal, openModal] = useState(false);

    useEffect(() => {
        fetch('api/SampleData/WeatherForecasts').then(response => response.json()).then(data => {
            console.log(data);
            setState(data);
        });
    }, []);

    const editRow = (id) => {
        openModal(true);
    }


    return (
        <div>

            {state.length <= 0 &&
                <center><h2>Loading...</h2></center>
            }

            {modal &&
                <MyModal show={modal} onHide="false" />
            }

            <button className="edit" onClick={() => editRow(1)}>Edit</button>

            </div>
    );
}

export default App;

当我单击编辑按钮时，在控制台中出现此错误：

上述错误发生在组件中：       在Bootstrap（Modal）中（在Modal.js：9）       在MyModal中（在App.js：31）       在div中（在App.js：24）       在App中（位于src / index.js：11）

考虑将错误边界添加到树以自定义错误   处理行为。参观学习   有关错误边界的更多信息。 index.js：2178错误：无效的挂钩调用。   挂钩只能在功能组件的主体内部调用。   可能由于以下原因之一而发生：   1.您的React和渲染器版本可能不匹配（例如React DOM）   2.您可能违反了《钩子规则》   3.您可能在同一应用程序中拥有多个React副本。有关如何调试和调试的提示，请参见   解决此问题。 react.development.js：88错误：无效的挂钩调用。   挂钩只能在功能组件的主体内部调用。   可能由于以下原因之一而发生：   1.您的React和渲染器版本可能不匹配（例如React DOM）   2.您可能违反了《钩子规则》   3.您可能在同一应用程序中拥有多个React副本。有关如何调试和调试的提示，请参见   解决此问题。

我不明白我在做什么错？有人可以解释吗？

编辑：

实现Modal的代码时似乎出现错误。

这会引发错误：

import React, { Component } from 'react';

import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

class MyModal extends Component {
    render() {
        return (
            <Modal
                {...this.props}
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                centered
            >
                <Modal.Header closeButton>
                    <Modal.Title id="contained-modal-title-vcenter">
                        Modal heading
          </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <h4>Centered Modal</h4>
                    <p>
                        Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
                        dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
                        ac consectetur ac, vestibulum at eros.
          </p>
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={this.props.onHide}>Close</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

export default MyModal;

这不会引发错误：

class MyModal extends Component {
    render() {
        return (
            <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered>



            </Modal>

        );
    }
}

Answer 1

我试图重现您的示例（并删除了演示中不需要的一些代码）：https://stackblitz.com/edit/react-bpzwds

基本上，它似乎起作用。但是我不得不更改onHide道具，因为它似乎只接受一个函数（来源：react-bootstrap documentation）。

您可能想尝试的是：

删除多余的代码（获取数据的副作用）。
验证您使用了正确的React和/或react-bootstrap版本。
在模态undefined道具中添加一个函数（甚至是onHide），因为您将其从Modal传递到了react-bootstrap。

Answer 2

我找到了可以在链接enter link description here上看到的解决方案

注意，某些时间模式不会显示，因为hi的淡入淡出设置类似于下一个代码

<Modal isOpen={this.state.modal} fade={this.state.fade }  toggle={this.toggle}>

如何查看那里的链接。但是在接下来的链接中，我在塞尔维亚enter link description here

处得到了描述。

开放式反应自举模态

2 个答案: