Question

我在显示数组中的对象时遇到问题。我想从这里显示id：

    [  
   {  
      "id":"1",
      "imagename":"dog"
   },
   {  
      "id":"2",
      "imagename":"cat"
   },
   {  
      "id":"3",
      "imagename":"mouse"
   },
   {  
      "id":"4",
      "imagename":"deer"
   },
   {  
      "id":"5",
      "imagename":"shark"
   },
   {  
      "id":"6",
      "imagename":"ant"
   }
]

这是我的尝试：

fetch(`http://www.example.com/React/data.php` , {
   method: 'POST',
   headers: {
     'Accept': 'application/json',
     'Content-Type': 'application/json',
   }

  })
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson,
        id: responseJson[0].id, <-- Attempt to try to get the id from responsejson.
        },function() {
          // In this block you can do something with new state.
        });
    })
    .catch((error) => {
      console.error(error);
    });

有了这个，我得到了undefined is not a function。我没有得到我做错了什么或如何访问这个对象。

 <FlatList

       data={ this.state.dataSource}

       ItemSeparatorComponent = {this.FlatListItemSeparator}


       renderItem={({item}) => <View>


       <Card>

         <View>


           <Text style={{marginTop: 30}}> {this.state.responseJson.id}</Text>


         </View>

       </Card>


       </View>


     }

     keyExtractor={(item, index) => index.toString()}

  />

Answer 1

尝试使用async / await方法，您会收到错误，因为数据未加载且渲染功能正在尝试加载数据。

import { ActivityIndicator } from 'react-native';

或者另一种方法是添加像这样的加载预加载器或微调器。

首先导入包。

render() {
    if (isLoading) {
        return ( <
            View style = {
                [styles.container, styles.horizontal]
            } >
            <
            ActivityIndicator size = "large"
            color = "#0000ff" / >
            <
            /View>
        );
    }
    return (
        // Your render stuffs
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10
  }
})

第二次更改渲染方法

Map<String, Ref> callAsMap = Git.lsRemoteRepository()
    .setRemote("https://github.com/example")
    .setCredentialsProvider(credentialsProvider)
    .callAsMap();

如有任何问题，请告诉我

使用React Native中的this.state访问JSON数组中的对象

1 个答案: