plotly onClick 事件导致 React 中的无限渲染循环

IT技术 reactjs dom-events render plotly.js plotly-react
2022-07-30 00:52:33

运行使用事件属性的 onClick 处理程序会导致react中的无限循环:

import React, {useState, useEffect} from 'react';
import Plot from 'react-plotly.js';
import ReactDOM from 'react-dom';

function PlotlyTest() {
    const [coord, setCoord] = useState([]);
    
    const handleClick = event => {
        const point = event.points[0];
        setCoord([point.x, point.y, point.z])
    }

    useEffect(() => console.log(coord))

    return (
        <div>
            <Plot
            data={[
                {
                x: [-2.294, -2.28, -2],
                y: [6.18, 7.19, 8],
                z: [
                    [0.16, 0.16, 0.16],
                    [-0.11, -0.22, -0.62],
                    [-0.1, -0.2, -0.3]
                ],
                    type: 'surface',
                    "mode": "markers",
                    opacity: 0.6
                },
            ]}            
            onClick={handleClick}
            />
        </div>
    );
}

ReactDOM.render(
  <React.StrictMode>
      <PlotlyTest/>
  </React.StrictMode>,
  document.getElementById('root')
);

无限渲染循环

0个回答
没有发现任何回复~