如何在 React Native 中使用 json 文件获取答案

【问题标题】：How to use json file fetch in react native如何在 React Native 中使用 json 文件获取
【发布时间】：2019-09-24 05:36:00
【问题描述】：

flatlist中的json数据应该如何使用？

这是我的代码

import React, { Component } from 'react'
import { Text, View, Button, YellowBox, FlatList, Image, ScrollView, Dimensions, TouchableHighlight } from 'react-native'
import Swiper from 'react-native-swiper'
import {styles} from '../style/styles'

class NavtexPage extends Component {
  constructor(props) {//function
    YellowBox.ignoreWarnings([
      'Warning: componentWillReceiveProps is deprecated',
      'Warning: componentWillUpdate is deprecated',
    ]);
    super(props);
    this.state = {
      indexPage: 0,
      isLoading: true,
    }
  }

  //fetch API
  componentDidMount = () => {
    fetch('http://localhost:3000/jsondb/2',
      {
        method: "GET",
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        }
      })//여기까지 fetch : requests 
      .then((response) => response.json())//fetch : response
      .then((responseData) => {
        console.log("성공 : ", responseData);
        this.setState({
          isLoading: false,
          data: responseData
        })
      })
      .catch((error) => {
        console.error("api error : " + error.message);
      });
  }

  //_renderItem how to json
  _renderItem = ({ item, index }) => {
    console.log('json : ', item);    
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{ flex: 0.1, backgroundColor: 'green' }}>
          <Text>NAVTEX</Text>
        </View>
          <View>
            <FlatList//i don't know
              style={{ flex: 1, marginTop: 50, borderWidth: 1, borderColor: 'red' }}
              data={this.state.data}
              numColumns={1}
              renderItem={this._renderItem}
              // keyExtractor={(item, index) => item.no.toString()}
              keyExtractor={(item => )}
              />
          </View>//help
      </View>
    );
  }
}

export default NavtexPage;

----------------ex.json

 [
        {
            "Page1_1" : 
            [
                {
                    "main_subject" : "asd",
                    "sub_subject" : "asd",
                    "mini_subject" : "asd",
                    "action" : "asd",
                    "action_img" : "",
                    "is_ok" : "1",
                },
                {
                    "main_subject" : "" ,
                    "sub_subject" : "",
                    "action" : "asd",
                    "action_img" : "",
                    "is_ok" : "",
                }
            ]
        },
        {
            "Page1_2" : 
            [
                {
                    "main_subject" : "asd",
                    "sub_subject" : "asd",
                    "mini_subject" : "asd",
                    "action" : "asd",
                    "action_img" : "",
                    "is_ok" : "1",
                },
                {
                    "main_subject" : "" ,
                    "sub_subject" : "",
                    "action" : "Ping to 155.155.1.2 (NAVTEX TX2 at HF Site)",
                    "action_img" : "",
                    "is_ok" : "",
                }
             ]
          }
    ]

【问题讨论】：

标签： json react-native fetch react-native-flatlist

【解决方案1】：

首先，您需要将 json 解析为数组或对象，然后将其分配给您的平面列表数据

  .then((responseData) => {
    let result = Json.parse(responseData)
   // you data is array,and have page
    let curPageData = result.page1_1
    this.setState({
      isLoading: false,
      data: curPageData
    })
  })

【讨论】：

page2_2应该怎么做？
看看你下面的数据，页面？_？是数据键，转换数据后，它就像一个地图。这页纸？_？是每个子数组键，你可以通过 result.key 使用任何人

【解决方案2】：

你也可以试试地图功能。

示例代码：-

this.state.data.map((data) => { //main data array

 return(

  data.map((insideData) => { //you can access page1_1 ... pages

   return(

    <Text>{insideData.main_subject}</Text> 
    .....

   )

  })      

 )     

})

【讨论】：