Question

嘿，我一直在使用Vue.Js，NodeJS，ExpressJS和mongoDB开发全栈应用程序，并且我的前端中有一个PostService.js类可以处理我的http请求。在此类中，我正在映射从api中获得的响应，但是问题是当我尝试映射响应时，我正在获取并出错。

错误表明data.map不是函数

那有什么解决方案，以便我可以映射数据并将其显示在前端？

PostService.js：


const url = "http://localhost:9000/api/posts/";

class PostService {
  static getPosts() {
    return new Promise(async (resolve, reject) => {
      try {
        const res = await axios.get(url);
        const data = res.data;
        resolve(
          data.map(post => ({
            ...post,
            createdAt: new Date(post.createdAt)
          }))
        );
      } catch (err) {
        reject(err);
      }
    });
  }
}

PostComponent.vue：

  <div class="container">
    <h1>Latest posts</h1>
    <hr />
    <p class="error" v-if="error">{{ error }}</p>
    <div class="posts-container">
      <div
        class="post"
        v-for="(post, index) in posts"
        v-bind:item="post"
        v-bind:index="index"
        v-bind:key="post._id"
      >
        {{`${post.createdAt.getDate()}/${post.createdAt.getMonth()}/${post.createdAt.getFullYear()}`}}
        <p class="text">{{ post.text }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import PostService from "../PostService";

export default {
  name: "PostComponent",
  data() {
    return {
      posts: [],
      error: "",
      text: ""
    };
  },
  async created() {
    try {
      this.posts = await PostService.getPosts();
    } catch (err) {
      this.error = err.message;
    }
  }
};
</script>

<style scoped>
...just styling in here
</style>

所以有人可以帮助我为什么我会收到错误消息

Answer 1

根据您的问题，我假设您来自<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent"/> </androidx.constraintlayout.widget.ConstraintLayout>的{{1}}值看起来像这样：

res

如果是这样，那就是object，而不是数组。 Map是数组内置函数（array.map）

您要映射的是响应中的await axios.get(url)数组

{
     posts: [],
     error: "",
     text: ""
}

Javascript data.map不是函数

1 个答案: