在我的示例中，我从 API 中获取了一个 Product-Object。Product 具有 ImageIds，指的是图片，在获取产品后，我也从 API 中获取了这些图片。

class ProductDetails extends Component {
    state = {
        productId: this.props.match.params.id,
        product: null,
        imagePaths: [],
        currentImagePath: null,
        loading: true
    }
    constructor(props) {
        super(props);
        this.request = getDefaultRequest();
    }
    componentDidMount = () => {
        this.fetchProduct();
    }
    // Api calls
    fetchProduct = async () => {
        const response = await this.request.get(`http://localhost:8080/product/Id=${this.state.productId}`);
        let { product } = response.data;
        this.setState({
            product
        }, () => {
            this.fetchImages().then((images) => {
                this.setImagePaths(images);
            });
        });
    }

    fetchImages = async () => {
        let { product } = this.state;
        let images = [];
        for (let i = 0; i < product.ProductImageIds.length; i++) {
            let currentProducImageId = product.ProductImageIds[i];
            let response = await this.request.get(`http://localhost:8080/productImage/Id=${currentProducImageId}`);
            images.push(response.data.productImage);
        }
        return Promise.resolve(images);
    }
    setImagePaths = (images) => {
        let imagePaths = images.map(image => {
            return image.absolutePath.split("public")[1].replaceAll("\\", "/");
        });
        this.setState({
            imagePaths,
            currentImagePath: imagePaths[0],
            loading: false
        });
    }

    render() {
      let { product, loading } = this.state;
        if (!loading) {
            return (
                <div>
                    <h2 className="t-center">{product.name}</h2>
                    <div className="wrap-product-details">
                        <ProductQuickWatch
                            imagePaths={this.state.imagePaths}
                            currentImagePath={this.state.currentImagePath}
                            productName={this.state.product.name}
                            productId={this.state.product._id}
                            orientation="vertical">

                        </ProductQuickWatch>
                    </div>
                </div>
            );
        }
        return (
            <LoadingCircle
                usePortal={true}
                loading={true} />
        )
      }

但现在我得到了“ TypeError：无法读取未定义的属性‘state’ ”

我调试了这个问题，发现在将加载状态设置为 false（在 setImagePaths() 中）之前，一切都运行正常。

如果我省略将加载设置为 false，一切都运行正常。 但我不知道为什么。如果你看看 render()，加载状态很重要。

我研究了这个问题，一个可能的解决方案是在构造函数中绑定函数。 但通常如果你使用箭头语法，“this”就不是问题。我也尝试过了，但是没有用 :/。

错误：

TypeError: Cannot read property 'state' of undefined
new i
C:/Users/David/Documents/GitHub/React/ShoppingTemplate/src/Store/WithStore.jsx:22
  19 |   children: null,
  20 | };
  21 | 
> 22 | constructor(props, context) {
     | ^  23 |   super(props, context);
  24 |   this.state = mapStateToProps({ ...context.state });
  25 |   this.updateStateProps = this.updateStateProps.bind(this);
▶ 19 stack frames were collapsed.
ProductDetails.setImagePaths
C:/Users/David/Documents/GitHub/React/ShoppingTemplate/app/src/Components/Category/ProductDetails.jsx:47
  44 | let imagePaths = images.map(image => {
  45 |     return image.absolutePath.split("public")[1].replaceAll("\\", "/");
  46 | });
> 47 | this.setState({
     | ^  48 |     imagePaths,
  49 |     currentImagePath: imagePaths[0],
  50 |     loading: false
View compiled
(anonymous function)
C:/Users/David/Documents/GitHub/React/ShoppingTemplate/app/src/Components/Category/ProductDetails.jsx:28
  25 |         product
  26 |     }, () => {
  27 |         this.fetchImages().then((images) => {
> 28 |             this.setImagePaths(images);
     | ^  29 |         });
  30 |     });
  31 | }