Реквизит, содержащий массив объектов, не может быть прочитан в дочернем компоненте

Question

Я пытаюсь отобразить несколько маркеров на карте.

У меня есть этот фрагмент кода в родительском компоненте:

const [coords, setCoords] = useState ([{}])

setCoords(
         [
           {lat: -5.2119899, lng: 119.4461816},
           {lat: -5.209704, lng: 119.44075},
         ]
       )

<ReactGoogleMaps coordinates={coords} />

фрагмент кода в дочернем компоненте :

const WrappedMap = withScriptjs(withGoogleMap((props) =>
<GoogleMap
    defaultZoom={13}
    defaultCenter={{ lat: Number(props.coordinates.lat), lng: Number(props.coordinates.lng) }}
  >
    {props.isMarkerShown && <Marker position={{ lat: Number(props.coordinates.lat), lng: Number(props.coordinates.lng)}} />}
  </GoogleMap>
));

function ReactGoogleMaps(props) {
    return (
        <div style={{width: "100%", height: "100%"}}>
            <WrappedMap 
                coordinates={{lat: props.coordinates[0].lat, lng: props.coordinates[0].lng}}
            />
        </div>
    )
};

Код выше работает нормально. Проблема в том, что когда индекс реквизита координат изменяется с 0 на 1, он возвращает эту ошибку: TypeError: Cannot read property 'lat' of undefined.

Я застрял на этом пару дней. Я буду очень признателен, если кто-нибудь сможет мне с этим помочь. Заранее благодарю

Answer 1

Получает ли ребенок обновленный реквизит? IMO, после того, как вы используете setCoords, реквизиты не обновляются в дочернем элементе.

Первое решение инициализируется значениями по умолчанию, которые вы используете:

 const [coords, setCoords] = useState ([
              {lat: -5.2119899, lng: 119.4461816},
           {lat: -5.209704, lng: 119.44075},
])

Второе решение, попробуйте UseEffect ():

function ReactGoogleMaps(props) {
    const [coords, setCords] = useState (props.coordinates)
      useEffect(() => {
         setCords(props.coordinates);
     }, [props]);

    return (
        <div style={{width: "100%", height: "100%"}}>
            <WrappedMap 
                coordinates={{lat: coords[0].lat, lng: coords[0].lng}}
            />
        </div>
    )
};

Примечание: я не тестировал, но надеюсь, что он работает

Answer 2

Координаты не устанавливаются сразу после первого рендеринга ReactGoogleMaps. Из-за этого, когда вы пытаетесь получить доступ к lat of props.coordinates [0], вы получаете эту неопределенную ошибку.

Я рекомендую либо:

• Не отображать ReactGoogleMaps до coords.length> 0
• Проверьте существование этого первого элемента, прежде чем пытаться получить доступ, как показано ниже:

    function ReactGoogleMaps(props) {
        return (
            <div style={{width: "100%", height: "100%"}}>
                { props.coordinates[0] &&
                    <WrappedMap 
                        coordinates={{lat: props.coordinates[0].lat, lng: props.coordinates[0].lng}}
                    />
                }
            </div>
        )
    };