Estoy recuperando un objeto JSON usando React Native Fetch y mi objetivo es representarlo como un menú desplegable en la pantalla. Sin embargo, antes de trabajar en la parte de renderizado, aparece este error "TypeError: Cannot read properties of undefined (reading 'Obj') React Native" en componentDidMount() y no estoy seguro de cuál es el problema.
fetch("https://jsonplaceholder.typicode.com/todos/?_limit=10") // **Api for fetching** .then(response => response.json()) .then((responseJson) => { var count = Object.keys(responseJson.message.Obj).length; let drop_down = []; for(var i=0;i<count;i++){ console.log(responseJson.message.Obj[i].title) // I need to add drop_down.push({ value: responseJson.message.Obj[i].title }); // Creating array of data } this.setState({ drop_down }); // Set the new state }) .catch(error =>console.log(error)) //to catch the errors if any }Gracias por adelantado.
TypeError: Cannot read properties of undefined (reading 'Obj') significa que lo que sea que llames a .Obj no está definido. En su caso, es responseJson.message no está definido. Entonces, cada vez que vea este mensaje, debe rastrear dos capas para depurar. En tu caso, comprueba qué es responseJson
Como está obteniendo de una API pública, hice una llamada rápida en mi navegador usando el siguiente código de depuración:
fetch("https://jsonplaceholder.typicode.com/todos/?_limit=10") .then(response => response.json()) .then((responseJson) => {console.log(responseJson)})Y veo lo siguiente en mi consola:
0: {userId: 1, id: 1, title: 'delectus aut autem', completed: false} 1: {userId: 1, id: 2, title: 'quis ut nam facilis et officia qui', completed: false} 2: {userId: 1, id: 3, title: 'fugiat veniam minus', completed: false} 3: {userId: 1, id: 4, title: 'et porro tempora', completed: true} 4: {userId: 1, id: 5, title: 'laboriosam mollitia et enim quasi adipisci quia provident illum', completed: false} 5: {userId: 1, id: 6, title: 'qui ullam ratione quibusdam voluptatem quia omnis', completed: false} 6: {userId: 1, id: 7, title: 'illo expedita consequatur quia in', completed: false} 7: {userId: 1, id: 8, title: 'quo adipisci enim quam ut ab', completed: true} 8: {userId: 1, id: 9, title: 'molestiae perspiciatis ipsa', completed: false} 9: {userId: 1, id: 10, title: 'illo est ratione doloremque quia maiores aut', completed: true} Lo que esto significa es que su responseJson ya es la matriz de datos en la que desea trabajar. No es necesario realizar más modificaciones, tampoco existe una clave como responseJson.message ni responseJson.message.Obj .
Según su código, creo que esto es lo que necesitaría:
fetch("https://jsonplaceholder.typicode.com/todos/?_limit=10") .then(response => response.json()) .then((responseJson) => { const drop_down = responseJson.map(todo => { return { value: todo.title } }); this.setState({ drop_down }); }) .catch(error =>console.log(error))También puede consultar la guía de la API que lo guiará a través de cómo se ven los datos https://jsonplaceholder.typicode.com/guide/