Реактивный реквизит загружается недостаточно быстро

Question

Я пытаюсь использовать Effect для установки широты и долготы карты при загрузке компонента. Проблема в том, что компонент загружается и рендерится до того, как реквизиты будут добавлены в useEffect.

useEffect(() => {
    console.log(props.bandLocation)
    // If I run this with a setTimeout it returns the data... but without the setTimeout it is an empty array. I need to set the latitude and longitude below to the data passed in through props... 
    setViewport({
        latitude: props.bandLocation[0],
        longitude: props.bandLocation[1],
        width: '100%',
        height: '200px',
        zoom: 2,
    })
}, [])

Answer 1

Уничтожить props и добавить зависимости к эффекту:

const { bandLocation } = props
useEffect(() => {
    setViewport({
        latitude: bandLocation[0],
        longitude: bandLocation[1],
        width: '100%',
        height: '200px',
        zoom: 2,
    })
}, [bandLocation])

Таким образом, эффект будет работать только при изменении bandLocation.

Answer 2

Установите зависимость useEffect на props, чтобы при смене реквизита компонент соответствующим образом перерисовывался. как это:

useEffect(() => {
    console.log(props.bandLocation)
    // If I run this with a setTimeout it returns the data... but without the setTimeout it is an empty array. I need to set the latitude and longitude below to the data passed in through props... 
    setViewport({
        latitude: props.bandLocation[0],
        longitude: props.bandLocation[1],
        width: '100%',
        height: '200px',
        zoom: 2,
    })
}, [props])

Чтобы объяснить это, пользовательский эффект, который у вас есть, не знает о его окружении, так как он работает на компонентном монтировании, но тогда ему все равно, что произойдет. Когда вы добавляете реквизиты в качестве зависимости, они не только запускаются в первый раз, но и следят за изменениями в реквизитах, а затем снова запускаются при обнаружении изменений.