Usando React Native Expo, tengo una pantalla MapView que muestra información de un marcador (título, descripción, imagen, etc.) en una pantalla inferior. Actualmente tengo una función que cuando se presiona un marcador, la información del marcador se pasa a una variable llamada MarkerInfo y se muestra en la pantalla inferior. Sin embargo, cuando se inicializa el componente, no se muestra información en la hoja inferior.
Me gustaría mostrar un mensaje que solicite a los usuarios que seleccionen un marcador.
Aquí está el bloque de código actual que incluye la función pressMarker:
// ## Attempting to set intial values prompting users to select a marker for more info const state = { MarkerInfo: { PreviewTitle: "Select A Marker.", Description: "Press on a marker to get location information" } }; // ## Without the code above this all works fine: // ## Setting the currently selected marker as variable (in an array) "MarkerInfo". const [MarkerInfo, setMarkerInfo] = useState([]); const pressMarker = (i) => { setMarkerInfo(i); console.log(i) return(MarkerInfo) };Aquí hay un ejemplo de cómo se ve la matriz de información del marcador, cuando se empuja un marcador.
Object { "Description": "Former historic palace housing huge art collection, from Roman sculptures to da Vinci's 'Mona Lisa.", "ImageUrl": "*** My firebase storage URL", "Latitude": 48.86074344, "Location": "Paris", "Longitude": 2.337659481, "PreviewTitle": "Louvre", "Title": "Louvre Museum", "id": 64, "key": "63", }Sin embargo, actualmente la hoja inferior no muestra nada hasta que golpeo un marcador. Así que parece que mi definición de variable inicial de la información del marcador no se está ejecutando como esperaba.
¿Qué necesito cambiar con la declaración inicial? También intenté hacer una función usando el componente montado y devolver la información del marcador inicial sin suerte.
no necesita usar métodos de ciclo de vida como componentDidMount si está usando ganchos. Y como parece, la forma en que intenta inicializar el estado en primer lugar parece incorrecta cuando usa enlaces y componentes funcionales como lo sugiere React.
debe pasar el mismo objeto que el objeto que tendrá en el estado cuando seleccione un elemento de la matriz, como el valor inicial en la declaración useState .
por lo que su código debe ser
const initialState = { "Description": "Press on a marker to get location information", "ImageUrl": "", "Latitude": 0, "Location": "", "Longitude": 0, "PreviewTitle": "Select A Marker.", "Title": "Select A Marker.", "id": 0, "key": "", } const [MarkerInfo, setMarkerInfo] = useState(initialState);PD : asumo que su PreviewTitle y Description es el que está mostrando en la pantalla
tratar de usar
setMarkerInfo([...i]);
en lugar de usar
setMarkerInfo(i);