运行使用事件属性的 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')
);