收到此错误"Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."

Question

我是 reactjs 中的新消息，我收到此错误："错误：重新渲染太多。React 限制了渲染的数量以防止无限循环"，我不确定如何解决它。

const MAPBOX_TOKEN = ''; ///add token here
export default function MapHooks(){
const [mapping, setMapping] = useState({
width: 800,
height: 600,
longitude: -122.45,
latitude: 37.78,
zoom: 14
});
function _onViewportChange(mapping){
setMapping({mapping})
}
function _goToNYC() {
const viewport = {
...mapping,
longitude: 101.7412,
latitude: 3.1549,
zoom: 14,
transitionDuration: 5000,
transitionInterpolator: new FlyToInterpolator(),
transitionEasing: d3.easeCubic
};
setMapping({viewport}) 
}
return (
<div>
<button onClick={_goToNYC()}>New York City</button>
<MapGL
{...mapping}
mapStyle="mapbox://styles/mapbox/dark-v10"
onViewportChange={_onViewportChange()}
mapboxApiAccessToken={MAPBOX_TOKEN}
></MapGL>
</div>
);
}

请帮忙，谢谢:)

Answer 1

在将函数分配给onClick时，您不应该执行该函数，您应该像这样传递它：

<button onClick={_goToNYC}>New York City</button>

如果在分配它时实际调用它，则该函数将执行。在该执行中，您调用setMapping(...)，这将触发重新渲染。这将导致该函数在按钮呈现时再次执行，依此类推 ->无限循环

Answer 2

这是最新的源代码。 谢谢:)

const MAPBOX_TOKEN = ''
export default function MapHooks(){
const [mapping, setMapping] = useState({
width: 800,
height: 600,
longitude: -122.45,
latitude: 37.78,
zoom: 14
});
function _goToNYC() {
const viewport = {
...mapping,
longitude: 101.7412,
latitude: 3.1549,
zoom: 14,
transitionDuration: 5000,
transitionInterpolator: new FlyToInterpolator(),
transitionEasing: d3.easeCubic
};
setMapping(viewport)            
}
return (
<div style={{borderStyle: "solid"}}>
<button onClick={_goToNYC}>2BF53E</button>
<button>406C01</button>
<MapGL
{...mapping}
mapStyle="mapbox://styles/mapbox/dark-v10"
onViewportChange={setMapping}
mapboxApiAccessToken={MAPBOX_TOKEN}
></MapGL>
</div>
);
}