0
253
VistasNo se puede acceder a la propiedad del objeto aunque debería estar allí
Tengo un componente en reaccionar que obtiene una historia que un usuario escribió desde el backend. Luego almaceno el json en storyState y cuando lo registro, las propiedades necesarias como "título" están ahí, pero cuando intento acceder al título de la propiedad, aparece este error:
TypeError: Cannot read properties of undefined (reading 'title')Aquí está el código:
import { useState, useEffect } from 'react'; import styled from 'styled-components'; export const StoryPage = () => { const [storyState, setStoryState] = useState({ story: {}, isLoaded: false, error: null, }); const queryString = window.location.search; const urlParams = new URLSearchParams(queryString); const id = urlParams.get('storyid'); useEffect(() => { fetch('http://localhost:5000//getstory?storyid=' + id) .then((response) => { console.log('response is', response); if (response.status !== '200') { let err = Error; err.message = 'Invalid response code: ' + response.status; setStoryState({ error: err }); } return response.json(); }) .then((json) => { console.log('json is', json); setStoryState({ story: json.story, isLoaded: true, }); }); }, []); console.log('storystate.story', storyState.story); return ( <> <h1>test</h1> <h1>{storyState.story.title}</h1> </> ); }; export default StoryPage; Revisé StackOverflow e intenté usar JSON.parse , que desafortunadamente no funcionó.
Cuando hago < h1 >{storyState.story}</ h1 > obtengo el objeto completo en forma de cadena con todas las propiedades como se esperaba.
Aquí está mi consola:
3 Respuestas
Responde la pregunta0
El problema está en esta línea:
if (response.status !== "200") { } Debería ser 200 en lugar de "200". Puede comprobar el console.log("response is", response); , es numérico 200 no cadena.
Nota: utilice siempre la siguiente construcción para establecer el estado de los objetos:
{ ...previousState, { newkey: newvalue } }Lo anterior usa los valores anteriores del objeto y los reemplaza con nuevos valores.
0
En el primer renderizado, los datos no están disponibles, por lo tanto, debe renderizar <h1>{storyState.story.title}</h1> solo cuando los datos se obtienen y están disponibles, así que agregue una declaración if en el renderizado o puede usar encadenamiento opcional también
<h1>{storyState?.story?.title}</h1>0
Podría haber un retraso en la obtención de datos del servidor, puede agregar un cargador que verifique si hay un valor en storySTate y luego renderice los datos o agregue otra función useEffect que registre el archivo cada vez que haya un cambio en el gancho de storyState, por ejemplo:
useEffect(() => { console.log(storyState.story) }, [storyState])