首頁猿問包含對象數組的道具無法在子組件中讀取

包含對象數組的道具無法在子組件中讀取

JavaScript

喵喔喔 2022-12-22 14:41:44

我正在嘗試在地圖中顯示多個標記。我在父組件中有這段代碼：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。我已經堅持了幾天。如果有人可以幫助我，我將非常感激。提前非常感謝你。

查看完整描述

2 回答

藍山帝景

TA貢獻1843條經驗獲得超7個贊

第一次渲染發生時，不會立即設置坐標ReactGoogleMaps。因此，當您嘗試訪問 props.coordinates[0] 的緯度時，您會收到此未定義的錯誤。

我建議：

在 coords.length > 0 之前不渲染 ReactGoogleMaps

在嘗試訪問之前檢查第一個元素是否存在，如下所示：

function ReactGoogleMaps(props) {

return (

{ props.coordinates[0] &&

<WrappedMap

coordinates={{lat: props.coordinates[0].lat, lng: props.coordinates[0].lng}}

}

</div>

)

};

反對回復 2022-12-22

達令說

TA貢獻1821條經驗獲得超6個贊

孩子甚至得到更新的道具嗎？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 (

<WrappedMap

coordinates={{lat: coords[0].lat, lng: coords[0].lng}}

</div>

)

};

注意：我還沒有測試過，但希望它能工作

反對回復 2022-12-22

2 回答
0 關注
96 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

包含對象數組的道具無法在子組件中讀取

包含對象數組的道具無法在子組件中讀取

2 回答

添加回答