反应，TypeError：无法读取未定义的属性“ map”

Question

我正在尝试从后端API读取数据。

我在浏览器中遇到此错误：

ListProductComponent.render
  63 |     <th>Release Date</th>
  64 |   </tr>
  65 | </thead>
> 66 | <tbody>
     | ^  67 |   {this.state.products.map(product => (
  68 |     <tr key={product.id}>
  69 |       <td>{product.mark}</td>

ListProductComponent.jsx文件：

import React, { Component } from "react";
import ApiService from "../service/ApiService";

class ListProductComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            products: [],
            message: null
        }
        this.deleteProduct = this.deleteProduct.bind(this);
        this.editProduct = this.editProduct.bind(this);
        this.addProduct = this.addProduct.bind(this);
        this.reloadProductList = this.reloadProductList.bind(this);
    }

    componentDidMount() {
        this.reloadProductList();
    }

    reloadProductList() {
        ApiService.fetchProducts()
            .then((res) => {
                this.setState({products: res.data.result})
            });
    }

    deleteProduct(productId) {
        ApiService.deleteProduct(productId)
           .then(res => {
               this.setState({message : 'Product deleted successfully.'});
               this.setState({products: this.state.products.filter(product => product.id !== productId)});
           })

    }

    editProduct(id) {
        window.localStorage.setItem("productId", id);
        this.props.history.push('/edit-product');
    }

    addProduct() {
        window.localStorage.removeItem("productId");
        this.props.history.push('/add-product');
    }

  render() {
    return (
      <div>
        <h2 className="text-center">Product Details</h2>
        <button className="btn btn-danger" onClick={() => this.addProduct()}>
          {" "}
          Add Product
        </button>
        <table className="table table-striped">
          <thead>
            <tr>
              <th className="hidden">Id</th>
              <th>Mark</th>
              <th>Model</th>
              <th>Price</th>
              <th>Count</th>
              <th>Release Date</th>
            </tr>
          </thead>
          <tbody>
            {this.state.products.map(product => (
              <tr key={product.id}>
                <td>{product.mark}</td>
                <td>{product.model}</td>
                <td>{product.price}</td>
                <td>{product.count}</td>
                <td>{product.releaseDate}</td>
                <td>
                  <button className="btn btn-success" onClick={() => this.deleteProduct(product.id)}>Delete</button>
                  <button className="btn btn-success" onClick={() => this.editProduct(product.id)}>Edit</button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default ListProductComponent;

有什么问题？与示例代码相比，很多时候我找不到任何错误。 此外，后端数据已在浏览器控制台中成功读取。 不幸的是，我不知道可以为这个问题添加什么信息。