收到此错误“错误：重新渲染过多。React 限制渲染次数以防止无限循环。”答案

【问题标题】：received this error "Error: Too many re-renders. React limits the number of renders to prevent an infinite loop."收到此错误“错误：重新渲染过多。React 限制渲染次数以防止无限循环。”
【发布时间】：2020-05-23 04:45:13
【问题描述】：

我是 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>
    );
}

请帮忙，谢谢:)

【问题讨论】：

你在使用useEffect吗？
嗨，我没有使用 useEffect，但如果我使用它，我可以添加到 onClick 按钮中吗？ *对不起我的英语

标签： reactjs react-hooks react-map-gl

【解决方案1】：

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

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

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

【讨论】：

React 使用一种叫做合成事件的东西来实现跨浏览器的事件处理。阅读更多关于here

【解决方案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>
    );
}

【讨论】：