android - 接收 TypeError: undefined is not a function (near'...posts.map...') React-Native / Rails 6.0 API

Question

我正在尝试在 iPhone/Android 设备上运行我的 Expo 应用程序，但我收到了

“未定义不是函数（靠近'...posts.map...'）”

但是该应用程序在 iOS 模拟器上运行......它确实在 Android 模拟器上显示了错误。我对 React Native 很陌生，我试图弄清楚为什么它没有返回我的 iPhone（物理）和 Android Emulator 的对象。

完整的错误如下，我编写的代码将跟随它。如何解决此 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)
    ....

我的反应原生代码：

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

标签： androidruby-on-railsreactjsreact-native

Answer 1

您应该使用 (post, index) 而不是 (posts, index)，因为您在组件 PhotoPost 中使用了变量 post。

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