React-Native：解析JSON

Question

feed.js

import React, { Component } from 'react';
import {
  Text,
  View,
  ScrollView,
  StyleSheet,
  Image
} from 'react-native';
import { List, ListItem } from 'react-native-elements';
import { Feeds } from '../config/data';

const styles = StyleSheet.create({
  logo: {
    marginLeft: 145,
    marginTop: 35,
    tintColor: '#2ecc71'
  }
});

console.log(Feeds);

class Feed extends Component {
  render() {
    return (
      <ScrollView>
        <Image style={styles.logo} source={require('../img/Logo.png')} />
        <List>
            Feeds.map(function(feedData) {
                <ListItem
                key={feedData.id}
                title={feedData.title}
                subtitle={feedData.content}
                />
            });
        </List>
      </ScrollView>
    );
  }
}

export default Feed;

data.js

export const Feeds = Get('http://example.de/api.php');

function Get(url) {
  return fetch(url).then(response => {
    if (response.ok) {
      const contentType = response.headers.get('Content-Type') || '';

      if (contentType.includes('application/json')) {
        return response.json().catch(error => {
          return Promise.reject(new ResponseError('Error: ' + error.message));
        });
      }
    }
  }).catch(error => {
    return Promise.reject(new NetworkError(error.message));
  });
}

Now this throws out that feedData is not defined. Why exactly is that? Also i've tried another way of showing the data (see below) but that also ends up in errors.

Attempt:

            Feeds.then(response => {
                {response.map((feed) => (
                    <ListItem
                    key={feed.id}
                    title={feed.title}
                    subtitle={feed.content}
                    />
                 ))}
            });

The json returned from the site is correct (and errors should be catched anyway).

Answer 1

Issues:

1. Feeds returns a promise and so you cannot use is as Feeds.map(...) .

2. Whatever you are doing in Get is unnecessary as fetch returns a promise, and Get adds another promise wrapper. Also fetch is capable of throwing appropriate errors.

I assume parsing response based on response type is the only reason for making Get function, try following

function Get2(url) {
  return fetch(url).then(response => {
    const contentType = response.headers.get('Content-Type') || '';

    if (contentType.includes('application/json')) {
      return response.json().catch(error => Promise.reject(`ResponseError: ${error.message}`))
    }
    // Check for other content type, its better to convert to json, as above returns json

  }).catch(error => Promise.reject(`NetworkError: ${error.message}`));
}

Please try following snippet for rendering data:

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      feeds: []
    }

    this.fetchFeeds = this.fetchFeeds.bind(this)
  }

  componentDidMount() {
    this.fetchFeeds()
  }

  fetchFeeds() {
    Feeds.then(res => {
      this.setState({
        feeds: res
      })
    }).catch(err => {
      console.log(err)
    })
  }

  render() {
    return (
      <ScrollView>
        <Image style={styles.logo} source={require('../img/Logo.png')} />
        <List>
            {this.state.feeds.map( feedData => {
                return <ListItem
                key={feedData.id}
                title={feedData.title}
                subtitle={feedData.content}
                />
            })}
        </List>
      </ScrollView>
    );
  }
}