TypeError：无法读取未定义的(读取'Obj')React Native的属性

Question

我正在使用React Native Fetch检索一个JSON对象，我的目标是将其呈现为屏幕上的下拉列表。然而，在处理渲染部分之前，我得到了这个错误"；TypeError:无法读取未定义(读取"Obj"(React Native"的属性；在componentDidMount((上，我不确定问题是什么。

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
}

提前谢谢。

Answer 1

TypeError: Cannot read properties of undefined (reading 'Obj')表示您对其调用的.Obj都是未定义的。在您的情况下，它是未定义的responseJson.message。因此，每次看到此消息时，都需要跟踪两层进行调试。在您的情况下，请检查什么是responseJson

由于您是从公共API获取的，我在浏览器中使用以下调试代码进行了快速调用：

fetch("https://jsonplaceholder.typicode.com/todos/?_limit=10")
.then(response => response.json())
.then((responseJson) => {console.log(responseJson)})

我在控制台中看到以下内容：

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}

这意味着你的responseJson已经是你想要处理的数据数组了。不需要做进一步的修改，也没有responseJson.message和responseJson.message.Obj这样的键。

根据你的代码，我认为这就是你需要的：

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))

您还可以参考API指南，该指南将引导您了解数据的外观https://jsonplaceholder.typicode.com/guide/