无法从 api 调用中获取 Json 数据

Question

我想知道如何在数组数组中获取 json 数据。

我希望能够根据group_id 提取组，并列出该group_id 中的所有用户及其所有凭据。这是json数据结构的样子：

{
  "groups": [
    {
      "group_id": 736,
      "members": [
        {
          "user_id": 1,
          "email": "jdoe@test.com",
          "first_name": "John",
          "last_name": "Doe"
        },
        {
          "user_id": 14,
          "email": "Hf@gmail.com",
          "first_name": "Be",
          "last_name": "Hg"
        },
        {
          "user_id": 10,
          "email": "Tea@gmail.com",
          "first_name": "Sugar",
          "last_name": "Tea"
        }
      ]
    },
    {
      "group_id": 737,
      "members": [
        {
          "user_id": 3,
          "email": "kentt@test.com",
          "first_name": "Kent",
          "last_name": "Torrel"
        },
        {
          "user_id": 12,
          "email": "Chh",
          "first_name": "Dog",
          "last_name": "Go"
        },
        {
          "user_id": 15,
          "email": "",
          "first_name": "",
          "last_name": ""
        }
      ]
    },
    {
      "group_id": 738,
      "members": [
        {
          "user_id": 6,
          "email": "rajpaj@test.com",
          "first_name": "Raj",
          "last_name": "Parikh"
        },
        {
          "user_id": 2,
          "email": "vt@test.com",
          "first_name": "Vathana",
          "last_name": "Him"
        },
        {
          "user_id": 11,
          "email": "Tea@gmail.com",
          "first_name": "Sugar",
          "last_name": "Tea"
        }
      ]
    },
    {
      "group_id": 739,
      "members": [
        {
          "user_id": 13,
          "email": "Hdh",
          "first_name": "Ou",
          "last_name": "Hm"
        },
        {
          "user_id": 9,
          "email": "lk@test.com",
          "first_name": "Larry",
          "last_name": "Jones"
        },
        {
          "user_id": 4,
          "email": "mcruz@test.com",
          "first_name": "Megan",
          "last_name": "Cruz"
        }
      ]
    },
    {
      "group_id": 740,
      "members": [
        {
          "user_id": 8,
          "email": "janejanej@test.com",
          "first_name": "Jajsdjao",
          "last_name": "Doe"
        },
        {
          "user_id": 16,
          "email": "",
          "first_name": "",
          "last_name": ""
        },
        {
          "user_id": 5,
          "email": "lbenjaminz@test.com",
          "first_name": "Liron",
          "last_name": "Benjamin"
        }
      ]
    }
  ]
}

到目前为止，这就是我所拥有的，但它只会在第一个索引处拉动group_id 的用户。我试过使用“item.members.user_id”，但没有任何显示。

constructor(props) {
          super(props);
          this.state = {
            isLoading: false,
          dataSource: null,
      }
    }

      componentDidMount(){
          return fetch('https://strengthn-backend.herokuapp.com/activeGroups')
          .then((response) => response.json())
          .then((responseJson) => {
              this.setState({
                  isLoading: false,
                  dataSource: responseJson.groups,
              })
          })
          .catch((error) => {
              console.error(error);
          });
      }

 addPerson() {

        if (this.state.isLoading) {

            return (
            <List>
            {console.log(this.state.dataSource)}
             <FlatList
            data={this.state.dataSource}
            renderItem={({item})=> (
            <Text>{item.members[0].user_id}</Text> 
            )}
            />  
            </List>

        )
    }  

Answer 1

需要 For 循环，否则它只会获取第一个数据。试试这个：

export default class Test extends React.Component{
  constructor(){
    super();
    this.state ={
      dataSource:'',
    }
  }

  componentDidMount(){
    this.fetchAPI()
  }

fetchAPI= async() => {
  let that= this;
  await fetch('https://strengthn-backend.herokuapp.com/activeGroups')
    .then(response => response.json())
    .then(response => {
      that.setState({ dataSource: response.groups})
    }).catch((error) => {
      Alert.alert("Error")
      return;
    })

    // console.warn("mana", this.state.dataSource);
  }


  _renderItem = ({item}) => {
    let temp = []

    for(var i=0; i < item.members.length; i++){

      temp.push(
        <View>
          <Text>{item.members[i].first_name} </Text>
          <Text>{item.members[i].last_name}</Text>
        </View>
      )
    }
    return temp
  }

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

希望对你有帮助！