无法忍受的TypeError：this.state.products.map不是函数

Question

我正在尝试从woocommerce中提取数据，该数据将被放入一个空数组中，对于该数组中的每个对象，我将从中获取特定数据。

这是我的代码：

export class MainRight extends Component {
  constructor(props) {
    super(props);

    this.state = {
      products: []
    };
  }

  componentDidMount() {
    const productsURL = "http://localhost:8888/wp-json/wc/v2/products/28/variations";

    fetch(productsURL)
      .then(response => response.json())
      .then(response => {
        this.setState({
          products: response
        });
      });
  }

  render() {
    let lengthVariations = this.state.products.map((product, index) => {
      return (
        <div key={index}>
          <LengthSelectorButtons lengths={product.option} />
        </div>
      );
    });

    return (
      <div style={{ display: "inline-block" }}>
        <div className="mainRightContainer">
          <h1 className="hairTitle">{this.props.hairPatternName}</h1>
          <p className="subTitles">{this.props.hairTextureName}</p>
          <LaceSelectorButtons />
          <p style={{ paddingTop: "121.5px" }} className="subTitles">
            Lengths
          </p>
          {lengthVariations}
          <div className="cartButton">
            <h1 className="cartTitle">ADD TO CART</h1>
          </div>
          <ReviewsShopPage />
        </div>
      </div>
    );
  }
}