时间戳

首页 > 解决方案 > React native：迭代 JSON 对象而不获取未定义的函数

javascript - React native：迭代 JSON 对象而不获取未定义的函数

问题描述

我是 React-Native 的新手，我正在通过网络上的教程和示例来学习这一点。我正在尝试做一些非常简单的事情，但是自从我遇到这个问题已经过去一周了，在挖掘了 StackOverflow 和许多其他内容之后，它们都无济于事。所以我决定直接问。如果问题看起来重复或看起来很愚蠢，我深表歉意。

我正在尝试遍历 JSON 对象并显示它。我现在要做的就是显示每个 JSON 对象及其标题（用户名）。我打算做更多的事情——让标题成为一个按钮，并在点击按钮后显示用户的详细信息——但现在这是我遇到的大难题。

这是我的代码。请注意我对 fetchdata 方法的评论：

    import React, { Component } from 'react'
import { View, Text, FlatList, TouchableOpacity, ListView } from 'react-native'

class MyListItem extends React.PureComponent {
  _onPress = () => {
    this.props.onPressItem(this.props.id);
  };

  render() {
    const textColor = this.props.selected ? "red" : "black";
    return (
      <TouchableOpacity onPress={this._onPress}>
        <View>
          <Text style={{ color: textColor }}>
            {this.props.title}
          </Text>
        </View>
      </TouchableOpacity>
    );
  }
}

export default class HttpExample extends Component {
  constructor(props) {
  super(props);

  this.state = {
    data: '',
    username: [],
    first_name: '',
    last_name: ''
  };
  //Using ES6 we need to bind methods to access 'this'
  this.fetchData = this.fetchData.bind(this);
  }
   componentDidMount() {
     this.fetchData();
   }

    fetchData() {

      // The first line - which is commented - returns all of non-admin
      // users, the second one returns only one user. Note that the 
      // second one works fine and the first one does not.

      // fetch('http://URL/users.json', {
        fetch('http://URL/users/12345678001.json', {
         method: 'GET'
      })
      .then((response) => response.json())
      .then((responseJson) => {
         console.log(responseJson);

         this.setState({
           data: responseJson,
           username: responseJson.username,
           first_name: responseJson.first_name,
           last_name: responseJson.last_name
         })
      })
      .catch((error) => {
         console.error(error);
      });
   }

  _keyExtractor = (item, index) => item.id;

  _onPressItem = (id: string) => {
    // updater functions are preferred for transactional updates
    this.setState((state) => {
      // copy the map rather than modifying state.
      const selected = new Map(state.selected);
      selected.set(id, !selected.get(id)); // toggle
      return {selected};
    });
  };

   _renderItem = ({item}) => (
  <MyListItem
    id={item}
    onPressItem={this._onPressItem}
    title={this.state.username}
  />
);

   render() {
      return (
        <FlatList
    data={[this.state.data]}
    renderItem={this._renderItem}
  />
      )
   }
}

这是我自己编写的由 Django ReST 框架创建的 JSON 对象之一的示例。我只是稍微简化了对象并删除了一些字段，以便更好地阅读（头像字段是 base64 图像字段，它比原始字段小得多）：

    {
  "username": "12345678003",
  "email" : "sample@gmail.com",
  "first_name": "AAA",
  "last_name": "BBB",
  "phone_number": "12045678000",
  "gender": "M",
  "city": "NY",
  "description": "",
  "date_of_birth": "2010-03-28",
  "avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAPBhAREQ8QDQ8PDxIWEBAWFRANDxAQFRUWFhURExUYHSggGBolGxUTITEhJSkrLi4uFx8zODMsNygtLisBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAOEA4QMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABAUBAgMGB//EADIQAQABAwEHAQYEBwAAAAAAAAABAgMRBAUSITFBUXFhIjKRobHBM4HR8RMjQmJyguH/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APpgCIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADDIAAAAAAAAAAAAAAAAAAAAAAANrduaq8RGZkGqVY0FdXON2PXn8E/SaOKIzPGrv0jwlAhW9nURHHNU/B3p0tER7sOwDjVpaJj3YcbmzqJjhmJTAFPf0FdPGPaj5/BEejRtV",
  "groups": [1,2],
  "user_permissions": [],
  "interests": [1,2]
}

以上是我通过调用返回一个用户的http://URL/users/12345678001.json得到的。我已经能够在应用程序中将用户显示为一个可触摸的不透明度（上面的代码有效）但是当我调用具有如下结构的 users.json 时：

[{user1 data},{user2 data}, etc.]

我无法让移动应用程序在移动输出中显示每个用户的用户名。要么我什么都没有（什么都不显示），要么弹出通常的错误（TypeError：对象不是函数等）我想让应用程序遍历整个 users.json 并将每个用户的用户名显示为一个可触摸的不透明度。我尝试过使用 .map 来引发错误，或者responseJson通过数组索引调用每个对象，这要么不显示任何内容，要么引发错误。

让我知道您的想法和解决方案。

仅供参考，我正在直接在我的 Nexus 5X 手机上进行测试。

更新

这是 users.json 的示例，它反映在我的控制台日志中：

[{
"username": "12345678001",
"email" : "sample@gmail.com",
"first_name": "AAA",
"last_name": "BBB",
"phone_number": "12045678000",
"gender": "M",
"city": "NY",
"description": "",
"date_of_birth": "2010-03-28",
"avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAPBhAREQ8QDQ8PDxIWEBAWFRANDxAQFRUWFhURExUYHSggGBolGxUTITEhJSkrLi4uFx8zODMsNygtLisBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAOEA4QMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABAUBAgMGB//EADIQAQABAwEHAQYEBwAAAAAAAAABAgMRBAUSITFBUXFhIjKRobHBM4HR8RMjQmJyguH/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APpgCIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADDIAAAAAAAAAAAAAAAAAAAAAAANrduaq8RGZkGqVY0FdXON2PXn8E/SaOKIzPGrv0jwlAhW9nURHHNU/B3p0tER7sOwDjVpaJj3YcbmzqJjhmJTAFPf0FdPGPaj5/BEejRtV",
"groups": [1,2],
"user_permissions": [],
"interests": [1,2]
},
{
"username": "12345678003",
"email" : "sample@gmail.com",
"first_name": "AAA",
"last_name": "BBB",
"phone_number": "12045678003",
"gender": "M",
"city": "NY",
"description": "",
"date_of_birth": "2010-12-20",
"avatar": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxAPBhAREQ8QDQ8PDxIWEBAWFRANDxAQFRUWFhURExUYHSggGBolGxUTITEhJSkrLi4uFx8zODMsNygtLisBCgoKBQUFDgUFDisZExkrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrK//AABEIAOEA4QMBIgACEQEDEQH/xAAbAAEAAgMBAQAAAAAAAAAAAAAABAUBAgMGB//EADIQAQABAwEHAQYEBwAAAAAAAAABAgMRBAUSITFBUXFhIjKRobHBM4HR8RMjQmJyguH/xAAVAQEBAAAAAAAAAAAAAAAAAAAAAf/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/APpgCIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADDIAAAAAAAAAAAAAAAAAAAAAAANrduaq8RGZkGqVY0FdXON2PXn8E/SaOKIzPGrv0jwlAhW9nURHHNU/B3p0tER7sOwDjVpaJj3YcbmzqJjhmJTAFPf0FdPGPaj5/BEejRtV",
"groups": [1,2],
"user_permissions": [],
"interests": [1,2]
}]

另一个更新

根据要求，这是我的控制台的屏幕截图，请注意它与我在此处发布的内容不同，并且有许多不同的字段：

在此处输入图像描述

更多调查：

我决定让代码更简单，只关注主要问题。如何返回迭代对象进行显示：

我的代码现在是这样的：

import React, { Component } from 'react'
import { View, Text, ListView } from 'react-native'

export default class HttpExample extends Component {
  constructor(props) {
  super(props);

  data = [''];
  }

    fetchData() {
      fetch('http://URL/users.json', {
         method: 'GET'
      })
      .then((response) => response.json())
      .then((responseJson) => {
         console.log("ResponseJson is :" + responseJson);
         console.log(responseJson.users.length);
         console.log(responseJson.users.username);
         console.log(responseJson.users);
         console.log("THIS:::" + responseJson.users[0].username);
         responseJson.users.map((user) =>
       {
         console.log("THIS:::" + user.username);
         data.push(user.username);
         console.log("This.data:" + data[0] + "second:" + data[1]);
       });
         return data;
      })
      .catch((error) => {
         console.error(error);
      });
   }

  _keyExtractor = (item, index) => item.id;

   render() {
      return (
  <View>
 <ListView
   dataSource={this.fetchData()}
   renderRow={(data) => <Text>{data.username}</Text>}
  />
  </View>
      )
   }
}

所有“console.log”命令都返回正确的信息（检查帖子的结尾），但我的render不起作用并抛出 undefined is not a object。我真的不明白确切的问题是什么？不是data数组吗？为什么它不能显示并抛出TypeError？我怎么了？

console.log 以正确的顺序输出：

ResponseJson is :[object Object]
3
undefined
(whole users.json is returned)
THIS:::12345678001
THIS:::12345678001
This.data:second:12345678001
THIS:::12345678002
This.data:second:12345678001
THIS:::12345678003
This.data:second:12345678001

标签： javascriptandroidjsonreact-native

解决方案

推荐阅读