Блог

у меня есть проект, в котором я работаю над сокетом.ввод-вывод для данных в реальном времени, и я использую модальный режим boostrap для отображения графика внутри него.вот мой код приложения

     const socket = io.connect("http://localhost:4000")


    function App() {
    const [showModal, setShowModal] = useState(false)
    const [ch, setCh] = useState(-1);
    const [count, setCount] = useState(0)
    const [GD, setGD] = useState([])
    const dataGather = (data1) => {

        setGD(GD => [data1, ...GD])

    }
    const handleChannelId = () => {
    axios.get("http://localhost:3000/getChannelId").then((res) => {
      const getCh = res.data.chan
      setCh(getCh);

     }).catch((err) => {
      console.log(err.response)
    })
    }
    useEffect(() => {

    socket.on('wave', (data1) => {

      // console.log("count" count);
      //i  want to run this part only one time so i used count here
      if (count < 1) {
        setCount(1)
        setShowModal(true);
        handleChannelId();

      }
     
      if(showModal==true) {
      dataGather(data1);}

    })

    }, []);



    const hideModal = async() => {
    setCount(0);
    setShowModal(false)
    setGD([])
    await axios.get("http://localhost:3000/closeclient").then((response) => {

      setShowModal(false)


    }).catch((err) => {
      console.log(err)

    })

    }

    return (
    <div className="App">

      {showModal == true ? <Example hideModal={hideModal} GD={GD} ch={ch} showModal={showModal} /> : <></>}
     </div>
    );}

    export default App;
 

А вот мой модальный код для начальной загрузки REACT

 function Example({ ch, hideModal, GD, showModal }) {
    const [show, setShow] = useState(showModal);

    const [zoom, setZoom] = useState(1);

    const handleClose = () => {
        hideModal();
        setShow(false);
    };
    const handleChange = e => {
        let val = e.target.value * 0.01;
        setZoom(e.target.value * 0.02);
    };

    return (
        <>
            <Modal
                size="lg"
                aria-labelledby="contained-modal-title-vcenter"
                backdrop="static"
                keyboard={false}
                centered
                show={show}
                onHide={handleClose}
            >
                <Modal.Header closeButton className=" text-white py-1 header-bg">
                    <Modal.Title>Channel ID: {ch}</Modal.Title>
                </Modal.Header>

                <Modal.Body className="bg-dark ">
                    <Row>
                        <Col lg={11}>
                            <div id="zoom-graph">
                                <div
                                    className="zoom-col"
                                    style={{ transform: `scaleY(${zoom})` }}
                                >
                                    <Graph GD={GD} />
                                </div>
                            </div>
                        </Col>
                        <Col lg={1}>
                            {" "}
                            <input
                                type="range"
                                class="form-range"
                                orient="vertical"
                                </Col>
                                <div>
                                    <hr
                                        style={{
                                            backgroundColor: "white",
                                            position: "absolute",
                                            bottom: "190px",
                                            border: "2px solid red",
                                            width: "600px"
                                        }}
                                    ></hr>
                                </div>
                            </Row>
                        </Modal.Body>
                    </Modal>
                </>
            );
        }
        export default Example          step="5"
                                id="customRange3"
                            ></input>
                        </Col>
                        <div>
                            <hr
                                style={{
                                    backgroundColor: "white",
                                    position: "absolute",
                                    bottom: "190px",
                                    border: "2px solid red",
                                    width: "600px"
                                }}
                            ></hr>
                        </div>
                    </Row>
                </Modal.Body>
            </Modal>
        </>
    );
}
export default Example
 

Problem
now problem arise when new data comes from socket it does not allow modal to close .As long as data is coming modal close and reopen itself.when data stops and user click on close button it closes immediatley.May be i am missing some check or condition in useEffect.