Получение TypeError: undefined не является функцией (рядом с '... posts.map ...') React-Native / Rails 6.0 API

Question

Я пытаюсь запустить свое приложение Expo на устройствах iPhone / Android, но я получаю

"undefined не является функцией (рядом с ... posts.map ... ') "

Но приложение работает на эмуляторе iOS ... Оно показывает ошибку на эмуляторе Android. Я довольно новичок в React Native и пытаюсь выяснить , почему он не возвращает объекты для моего iPhone (физического) и Android эмулятора .

Полная ошибка приведена ниже, и код, который я написал, будет следовать ей. Как я могу исправить эту ошибку TypeError и правильно отобразить результаты на моем эмуляторе iPhone / Android?

Полная ошибка:

TypeError: undefined is not a function
(near'...posts.map')

    This error is located at:
     in Home (created by
     Context.Consumer)
     in Route (at App.js:21)
     in Switch (at App.js.30)
     in RCTSafeAreaView (at SafeAreaView.js:55)
     in SafeAreaView (at App.js:19)
     in App (at App.js:35)
     in Router (created by Memory Router)
    ....

Родной код My React:

import React, {useState, useEffect} from 'react';
import Axios from 'axios'
import {ScrollView} from 'react-native';
import PhotoPost from '../components/PhotoPost';
import ErrorBoundary from 'react-native-error-boundary'

const Home = () => {
 const [posts, setPosts] = useState([]);

 useEffect( () => {
  Axios.get('http://127.0.0.1:3000/image_post/index')
  .then(res => {
    setPosts(res.data)
  }).catch(e => setPosts(e.message))
}, []);

 return (
  <ScrollView>
    <ErrorBoundary>
      {posts.map((posts, index) => {
        return(
          <PhotoPost key={index} post={post} />
        )
      })}
    </ErrorBoundary>
  </ScrollView>
 )
}

export default Home

Answer 1

Чтобы использовать map в JS, данные должны быть массивом.

Внутри catch вы напрямую присваиваете сообщение об ошибке posts как setPosts(e.message) и пытаетесь использовать карту. Вот почему undefined is not a function (near'...posts.map...') произошло, потому что в это время posts не является массивом.

Существует несколько способов исправить эту ошибку, но лучше сохранить отдельное состояние для обработки ошибок, как показано ниже,

import React, { useState, useEffect } from "react";
import Axios from "axios";
import { View, Text, ScrollView } from "react-native";
import PhotoPost from "../components/PhotoPost";

const Home = () => {
  const [posts, setPosts] = useState([]);
  const [error, setError] = useState(false);

  useEffect(() => {
    Axios.get("http://127.0.0.1:3000/image_post/index")
      .then(res => {
        setPosts(res.data);
      })
      .catch(e => {
        setError(true);
        // log error
        console.log(e);
      });
  }, []);

  return (
    <ScrollView>
      {error ? (
        <View>
          <Text>Error while loading data ?</Text>
        </View>
      ) : (
        posts.map((post, index) => {
          return <PhotoPost key={index} post={post} />;
        })
      )}
    </ScrollView>
  );
};

export default Home;

Надеюсь, это поможет вам. Не стесняйтесь сомнений.

Answer 2

Вы должны использовать (post, index) вместо (posts, index), так как вы используете переменную post в компоненте PhotoPost.

<ErrorBoundary>
  {posts.map((post, index) => {
    return(
      <PhotoPost key={index} post={post} />
    )
  })}
</ErrorBoundary>