FlatList无法渲染项目

Question

On Fetching the Json data from remote url and while trying to render it via FlatList Component ,I am constantly getting Red-Screen with this error "incompatible receiver map required" .

I strongly guess it is related to android.

Json Response is coming properly as seen in react-logger.

I tried adding core-js : 2.5.2 in "resolutions" in package.json but still did not work.

HomeScreen.js

import React, { Component } from "react";
import {
  Text,
  View,
  FlatList,
  ActivityIndicator,
  Platform
} from "react-native";
import { Button } from "native-base";
import { connect } from "react-redux";
import firebase from "react-native-firebase";
import { onSignOut } from "../Actions/AuthActions";
import { stringify } from "qs";

class HomeScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: []
    };
  }

  static navigationOptions = {
    header: null
  };

  componentDidMount() {
    // Checking user Auth State
    this.unsubscribe = firebase.auth().onAuthStateChanged(user => {
      this.props.navigation.navigate(user ? "App" : "Auth");
    });

    // Fetching the list of workers from Remote Url
    return fetch("https://api.myjson.com/bins/xyz")
      .then(response => response.json())
      .then(responseJson => {
        this.setState(
          {
            isLoading: false,
            dataSource: responseJson.workers
          },
          function() {
            // In this block you can do something with new state.
          }
        );
      })
      .catch(error => {
        console.error(error);
      });
  }

  componentWillUnmount() {
    if (this.unsubscribe) this.unsubscribe();
  }

  render() {
    // First Loadf the activity indicator till the json data is not fetched
    if (this.state.isLoading) {
      return (
        <View style={{ flex: 1, paddingTop: 20 }}>
          <ActivityIndicator />
        </View>
      );
    }

    console.log(JSON.stringify(this.state.dataSource));

    return (
      <View style={styles.container}>
        <FlatList>
          data = {this.state.dataSource}
          renderItem=
          {({ item }) => <Text>{item.name}</Text>}
          keyExtractor={(item, index) => index}
        </FlatList>
      </View>
    );
  }
}

const styles = {
  container: {
    flex: 1,
    alignItems: "center",
    alignContent: "center",
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "center"
  },
  FlatListItemStyle: {
    padding: 10,
    fontSize: 18,
    height: 44
  }
};

package.json

{
  "scripts": {
    "start": "react-native start",
    "android": "react-native run-android",
    "ios": "react-native run-ios"
  },
  "dependencies": {
    "@babel/runtime": "^7.4.4",
    "firebase": "^5.11.1",
    "isomorphic-fetch": "^2.2.1",
    "native-base": "^2.12.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-native": "0.57.5",
    "react-native-elements": "^1.1.0",
    "react-native-firebase": "^5.3.1",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-google-places-autocomplete": "^1.3.9",
    "react-native-otp-inputs": "^2.0.1",
    "react-native-phone-input": "^0.2.1",
    "react-navigation": "^3.9.1",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-immutable-state-invariant": "^2.1.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-preset-expo": "^5.0.0",
    "eslint-plugin-react-hooks": "^1.6.0",
    "expo": "^32.0.6"
  },
  "resolutions": {
    "core-js": "2.5.2"
  },
  "private": true
}

Error Should not come and items should be rendered accordingly.

Answer 1

Check your response first. Is it the right array like as [{name: 'a'}, {name: 'b"}] ?

// Fetching the list of workers from Remote Url
    return fetch("https://api.myjson.com/bins/xyz")
      .then(response => response.json())
      .then(responseJson => {

        console.log(responseJson); // Check your response

        this.setState(
          {
            isLoading: false,
            dataSource: responseJson.workers
          },
          function() {
            // In this block you can do something with new state.
          }
        );
      })
      .catch(error => {
        console.error(error);
      });
  }

Update

You used flatlist to wrong way.

<FlatList>
          data = {this.state.dataSource}
          renderItem=
          {({ item }) => <Text>{item.name}</Text>}
          keyExtractor={(item, index) => index}
</FlatList>

need to change below

<FlatList
  data={this.state.datasource}
  renderItem={...}
/>