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 API，则http://192.168.0.42/blog/laravel/blog/public/api/posts/11 URL实际上应该返回一个帖子，而不是列表。

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

TypeError：this.state.posts.map不是函数

1 个答案:

提示