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

【问题标题】：Access object in JSON array with this.state in React Native在 React Native 中使用 this.state 访问 JSON 数组中的对象
【发布时间】：2018-05-22 03:03:45
【问题描述】：

我在显示数组中的对象时遇到问题。我想从这里显示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()}

  />

【问题讨论】：

responseJson 实际上是一个数组吗？
是的，JSON 对象数组。
您在上面的示例中确认了哪些数据？
顶部的 sn-p 正确显示来自 mysql 数据库的 json 编码数据，我只是将它复制到这里@Tony
是的，但是您是否确认了第一个then() 中的任何响应，或者实际上确认了第二个then() 中的数组？

标签： arrays json reactjs object react-native

【解决方案1】：

试试 async/await 方法，你会得到一个错误，因为数据没有加载并且渲染函数正在尝试加载数据。

async componentDidMount() {
    await 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
        });
    }).catch((error) => {
        console.error(error);
    });
}

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

首先导入包。

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

如果有任何问题请告诉我

【讨论】：