我正在讀取未定義的屬性 map。我已經嘗試了一切但沒有任何效果

Question

我在 StackOverflow 以及其他平台上嘗試了許多解決方案，但沒有任何效果。 我是 ReactJs 的新手，我無法理解我收到此錯誤的代碼有什么問題。

componentDidMount() {
console.log("component did mount");
axios.get('http://localhost:3000/')
.then(response => {
  if (response.data.length > 0) {
    this.setState({ 
      blogs: response.data
    });
  }
})
.catch((error) => {
  console.log(error);
})

}

render(){
console.log("inside render ");

  var b=this.state.blogs.map((blog)=>{
    console.log(blog);
     var taggu=blog.tag.map((tag)=>{
      return(
        <span>{tag}</span>
      )
      });
    var con=blog.content.slice(0,100);
    return(
      <Col className="my-1" lg="4" sm="6" >
      <Card key={blog._id}>
          <CardHeader tag="h3">{blog.topic}</CardHeader>
          <CardBody>
            <CardTitle tag="h5">By {blog.writer.username}</CardTitle>
            <CardText>{con}... </CardText>
            <Button>Learn More</Button>
          </CardBody>
          <CardFooter>{taggu}</CardFooter>
        </Card>
      </Col>
     )
  });


return ( <div className="App">{b}</div>)

}

Answer 1

來自Promise的axios不會立即resolve ，很可能之前調用了render function

this.setState({ 
  blogs: response.data
});

已執行，這意味着this.state.blogs未定義。

您可以添加

this.setState({ 
  blogs: []
});

在構造函數中或在調用其 map function 之前檢查this.state.blogs是否未定義：

render(){
  console.log("inside render ");
  if(!this.state.blogs)
    return <span>Loading...</span>;
  // Rest of the code below...