代码执行两次，但是应该只运行一次？

Question

我的代码执行了两次componentWillMount（）方法执行了两次。

也尝试了不同的生命周期方法。

  import React from "React";
  import ProductDetails from "./ProductDetails";

  class Product extends React.Component {
    constructor(props)
    {
      super(props);
      this.state={
        data : null
      }    
    }
    componentWillMount()
    {
      console.log("before");
      let xhr = new XMLHttpRequest();
      xhr.onreadystatechange = ()=>{

        if(xhr.readyState === 4 && xhr.status === 200)
        {
          let dataRecived = JSON.parse(xhr.responseText);
          this.setState({data: dataRecived})
        }

      }
      xhr.open("GET", "./db.json", true);
      xhr.send();
      console.log("before",this.state.data);
    }

    render(){
      console.log("after",this.state.data)
      return(
      <div>
        {/* <ProductDetails  data={this.state.data}/> */}
      </div>
      );
    }
  }

  export default Product;

它应该只执行一次