如何修复 typeError：无法读取未定义的属性“地图”

Question

我想从 Json Server 获取数据，我需要在哪里编辑？

这是我得到的错误

"TypeError: 无法读取未定义的属性 'map'"

getPosts() {
    axios.get("http://localhost:8001/employees")
    .then(response => {
        this.setState({
            posts : response.data.posts,
            isLoading: false
        });
    })

    .catch(error => this.setState({error, isLoading : false}));
}

componentDidMount () {
    this.getPosts();
}

render() {
  const {isLoading , posts} = this.state;
  return (
    <React.Fragment>
        <h2>Data JSON</h2>
        <div>
            {!isLoading ? (
                posts.map(post => {
                    const {id, first_name, last_name, email} = post;
                    return (
                        <div>
                            <h2>{id}</h2>
                            <h2>{first_name}</h2>
                            <p>{last_name}</p>
                            <p>{email}</p>
                            <hr />
                        </div>
                    );
                })
            ) : (
                <p>Loading...</p>
            )}
        </div>
    </React.Fragment>
  );
}

}

导出默认登录；

我希望来自 json 服务器的数据会出现，但它不会出现

Answer 1

constructor(props) {
   super(props) 
   this.state()={isLoading: true, posts: []}
}
getPosts() {
    axios.get("http://localhost:8001/employees")
    .then(response => {
        var posts = [];
        if(response.data.posts.length > 0) {
          posts = response.data.posts
        }
        this.setState({isLoading: false, posts: posts})   
     })

    .catch(error => this.setState({error, isLoading : false, posts: []}));
}

componentDidMount () {
    this.getPosts();
}

render() {
  const {isLoading , posts} = this.state;
  return (
    <React.Fragment>
        <h2>Data JSON</h2>
        <div>
            {!isLoading ? (
                posts.map(post => {
                    const {id, first_name, last_name, email} = post;
                    return (
                        <div>
                            <h2>{id}</h2>
                            <h2>{first_name}</h2>
                            <p>{last_name}</p>
                            <p>{email}</p>
                            <hr />
                        </div>
                    );
                })
            ) : (
                <p>Loading...</p>
            )}
        </div>
    </React.Fragment>
  );
}

Answer 2

该错误表明您正在尝试在 posts 存在之前对其进行映射。

如果你还没有在constructor中设置isLoading，则需要在componentDidMount中设置true。

componentDidMount () {
    this.setState({isLoading: true})
    this.getPosts();
}

您的catch 块也有问题。

catch(error => this.setState({error, isLoading : false}));

你将isLoading设置为false，然后在render方法中，你有这个：

{!isLoading ? (
      posts.map(post => { 
      //....

即使response 中有错误，您也正在尝试呈现帖子。

Answer 3

将帖子的默认状态设置为数组，并将 if 语句添加到您的渲染函数以检查该组件是否应渲染帖子。

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

  getPosts() {
    axios.get("http://localhost:8001/employees")
    .then(response => {
        this.setState({
            posts : Array.isArray(response.data) ? response.data : response.data.posts,
            isLoading: false
        });
    })
    .catch(error => this.setState({error, isLoading : false}));
  }

  componentDidMount () {
    this.getPosts();
  }

  render() {
    <>
      {posts.length > 0 && posts.map(post => <p>{post}</p>)}
    </>
  }
}