React.js 报错Cannot read property 'map' of undefined 多方案尝试无效

触发Cannot read property 'map' of undefined的原因有两个固定逻辑漏洞：

• React首次渲染时，componentDidMount内的axios异步请求尚未返回响应，而你没有提前给this.state.blogs设置初始值，此时this.state.blogs本身就是undefined，直接对其调用map方法必然报错。
• 接口返回的博客数据中，如果某条记录不存在tag字段，直接对blog.tag调用map方法会触发完全相同的报错。

• 补充state初始值定义。严格按照React生命周期执行顺序，首次render会先于componentDidMount执行，异步请求的响应是滞后的，必须提前给blogs设置空数组的初始值，不能依赖异步请求的返回完成初始化。
  参考初始化写法：

  constructor(props) {
    super(props)
    this.state = {
      blogs: []
    }
  }
  

• 为所有map调用增加空值兜底，避免数据异常导致页面崩溃。
  • 将原有this.state.blogs.map(...)修改为(this.state.blogs || []).map(...)，即便后续逻辑疏漏导致blogs变为undefined，也会自动使用空数组兜底，不会触发map调用错误。
  • 将原有blog.tag.map(...)修改为(blog.tag || []).map(...)，即便接口返回的某篇博客没有tag字段，也不会触发报错。
• 调整异步请求的赋值逻辑。原有代码仅在response.data.length >0时执行setState，这个判断没有必要——即便接口返回空数组，直接赋值给blogs也不会造成渲染问题，还能避免未走分支时blogs一直处于异常状态。

componentDidMount() {
  axios.get('http://localhost:3000/')
    .then(response => {
      this.setState({ blogs: response.data || [] })
    })
    .catch((error) => {
      console.log(error);
    })
}

render() {
  var b = (this.state.blogs || []).map((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>)
}

内容的提问来源于stack exchange，提问作者Jatin verma