TypeError：无法读取未定义的属性（读取'Obj'）React Native答案

【问题标题】：TypeError: Cannot read properties of undefined (reading 'Obj') React NativeTypeError：无法读取未定义的属性（读取'Obj'）React Native
【发布时间】：2022-01-14 16:29:34
【问题描述】：

我正在使用 React Native Fetch 检索 JSON 对象，我的目标是将其呈现为屏幕上的下拉菜单。但是，在处理渲染部分之前，我在 componentDidMount() 上收到此错误“TypeError: Cannot read properties of undefined (reading 'Obj') React Native”，我不确定问题是什么。

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
    }

提前致谢。

【问题讨论】：

检查您在responseJson.message 中获得的内容，它似乎不存在，因此出现错误

标签： javascript react-native

【解决方案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这样的key。

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

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/

【讨论】：