получил эту ошибку «Ошибка: слишком много повторных визуализаций. React ограничивает число визуализаций, чтобы предотвратить бесконечное l oop».

Question

Я новичок в reactjs Я получаю эту ошибку: «Ошибка: слишком много повторных визуализаций. React ограничивает число визуализаций, чтобы предотвратить бесконечное l oop». и я не уверен, как это решить.

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(...), что вызовет повторную визуализацию. Что приведет к повторному выполнению этой функции при рендеринге кнопки и т. Д. -> бесконечно l oop

Answer 2

это последний исходный код. спасибо :) 1001

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