Question

我创建了一个简单的程序来在应用程序上显示我网站上的信息。它适用于iOS，但在我的Android设备上显示错误： posts.map不是函数。这是我的代码：

import React, { Component } from 'react';
import {
  View,
  Text,
  ActivityIndicator,
  ScrollView,
  StyleSheet,
  Image,
  Header,
} from 'react-native';

let lw = 100;

import Img from 'react-image';

let li = 'https://www.teanewsnetwork.com/profileicons/';
let bean = 'azure.jpg';

export default class App extends Component {
  state = {
    loading: true,
    error: false,
    posts: [],
  };

  componentWillMount = async () => {
    try {
      const response = await fetch(
        'https://www.teanewsnetwork.com/api/fetcharticles.php?code=#NIL7*GKD60JTRTEFZ0CkvpHMJJW^-9q&starting=0&limit=40'
      );
      const posts = await response.json();

      this.setState({ loading: false, posts });
    } catch (e) {
      this.setState({ loading: false, error: true });
    }
  };

  renderPost = ({ id, title, content, authorimage, authorname }, i) => {
    let b = { authorname };
    return (
      <View style={styles.postContent}>
        <View
          style={{
            flex: 1,
            flexDirection: 'column',
            textAlign: 'center',
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text style={styles.postauthor}>{title} </Text>

          <Image
            source={{
              uri: `https://teanewsnetwork.com/profileicons/${authorimage}`,
            }}
            defaultSource={require('./contact-outline.png')}
            style={{
              width: lw,
              height: lw,
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
              borderRadius: lw / 2,
            }}
          />

          <Text style={styles.postauthor}>{authorname}</Text>
        </View>
        <Text style={styles.postBody}>{content}</Text>
      </View>
    );
  };

  render() {
    const {posts, loading, error} = this.state

    if (loading) {
      return (
        <View style={styles.center}>
          <ActivityIndicator animating={true} />
        </View>
      )
    }

    if (error) {
      return (
        <View style={styles.center}>
          <Text>
            Failed to load posts!
          </Text>
        </View>
      )
    }

    return (
      <ScrollView style={styles.container}>
        {posts.map(this.renderPost)}
      </ScrollView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    borderBottomWidth: 0,
    borderBottomColor: 'red',

    top: 100,
    zIndex: 6,
  },

  postauthor: {
    flex: 1,
    borderBottomWidth: 0,
    borderBottomColor: 'red',
    paddingVertical: 25,
    fontSize: 18,
    paddingRight: 15,
    left: 10,
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
  },

  postContent: {
    flex: 1,
    borderBottomWidth: 20,
    borderBottomColor: '#EEE',
    borderRadius: 4,

    fontSize: 18,
    left: 0,
    paddingRight: 15,
    justifyContent: 'center',
    alignItems: 'center',
    textAlignVertical: 'center',
    textAlign: 'center',
  },
  postBody: {
    marginTop: 1,
    fontSize: 18,
    color: 'black',
    left: 10,
    textAlign: 'center',
  },
  center: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

我是React Native的初学者，希望在这里有所帮助。该代码在带有EXPO的iOS模拟器上有效，但在我的Android设备上不起作用。预先感谢！

Answer 1

很有可能posts不是数组，请检查posts的类型。

React Native应用程序可在iOS上运行，但在Android posts上出现错误。未定义地图

1 个答案: