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

将帖子的默认状态设置为数组，并将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>)}
    </>
  }
}

Answer 2

该错误表明您正在尝试映射posts甚至还不存在。

如果尚未在isLoading中进行设置，则需要在true中将componentDidMount设置为constructor。

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

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>
  );
}

如何修复TypeError：无法读取未定义的属性'map'

3 个答案: