TypeError: this.state.posts.map不是一个函数

Question

我在使用react和laravel-api时遇到了一些问题，这是我的代码。

import React from 'react'
import axios from 'axios'


class Post extends React.Component{
        state = {
          posts: []
        }

        componentDidMount() {
          axios.get(`http://192.168.0.42/blog/laravel/blog/public/api/posts/11`)
            .then(res => {
              const posts = res.data;
              this.setState({ posts });
            })
        }

        render() {
          return (
            <ul>
              { this.state.posts.map(posts => <li>{posts.id}</li>)}
            </ul>
          )
        }

}

export default Post

我搞错了

图片：http://prntscr.com/oug5v3

文本

TypeError: this.state.posts.map不是一个函数

有人帮忙

Answer 1

我猜想，没有实际看到posts状态成员的内容，您实际上是从该HTTP中检索对象，而不是从一个数组中检索对象。

因此，第一个呈现效果很好，因为一个空数组仍然是一个数组(因此具有map方法)，然后，当请求完成时，您将posts状态变量替换为一个对象(没有map方法)。

正如我在对您的问题的评论中指出的那样，您应该检查从HTTP请求中产生的内容的实际价值。

如果使用的是浏览器内调试器，则应在这一行中放置一个断点：

this.setState({ posts });

然后检查posts的值。

如果您不想使用调试器(不过我不建议这样做)，您可以简单地将一个console.log(posts)放在上面提到的行前面。

提示

如果您正在开发REST，那么http://192.168.0.42/blog/laravel/blog/public/api/posts/11 URL实际上应该返回一个post，而不是一个列表。

我的猜测是，您实际上应该向http://192.168.0.42/blog/laravel/blog/public/api/posts提出请求(请注意/11部分已消失)。