打开反应引导模式答案

【问题标题】：Open react bootstrap modal打开反应引导模式
【发布时间】：2019-11-14 23:39:57
【问题描述】：

我有以下功能反应组件：

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;

这是我的模态组件：

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;

当我单击我的编辑按钮时，我在控制台中收到此错误：

组件出现上述错误：在 Bootstrap(Modal) (在 Modal.js:9) 在 MyModal 中（在 App.js:31）在 div 中（在 App.js:24 处）在应用程序中（在 src/index.js:11）

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

我不明白我在这里做错了什么？谁能解释一下？

编辑：

我在实现 Modal 的代码时似乎遇到了错误。

这会引发错误：

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



            </Modal>

        );
    }
}

这不会引发错误：

import React, { Component } from 'react';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';
class MyModal extends Component {
    render() {
        return (
       <div>Hey</div>

        );
    }
}

export default MyModal;

【问题讨论】：

您的代码运行良好！我没有发现任何错误！
请帮助创建一个stackblitz.com 示例以便重现错误
@adel：嗯，这对我不起作用。我会尝试更新所有内容。
我已经更新了我的问题。
你的代码正在运行！我不知道是否有其他影响您的模态的东西尝试提供一个代码框，以便我们看到错误！

标签： javascript reactjs

【解决方案1】：

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

基本上，它似乎有效。但我不得不更改 onHide 属性，因为它似乎只接受一个函数（来源：react-bootstrap documentation）。

你可能想尝试的是：

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

【讨论】：

【解决方案2】：

我找到解决方案，你可以在链接enter link description here看到谁

注意有时模态不显示，因为你有 fade 设置为 false 就像下一个代码一样

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

您如何在上面的链接上看到。但是在接下来的链接中，我在我的塞尔维亚人enter link description here得到了描述和描述

【讨论】：