尽管使用箭头语法，但无法读取未定义的属性“状态”

如何解决尽管使用箭头语法，但无法读取未定义的属性“状态”

在我的示例中，我从 API 获取产品对象。产品有 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：无法读取未定义的属性‘状态’”

我调试了这个并意识到一切正常，直到将加载状态设置为 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 | }

解决方法

有趣的讨论;) 我会把它作为答案，尽管它并没有真正回答。但是太长了，评论杂乱无章。两点：

这部分

    new i
    C:/Users/David/Documents/GitHub/React/ShoppingTemplate/src/Store/WithStore.jsx:22

很有趣，因为就我所见，它出现在错误上下文中而不是代码中。那么这是从哪里来的呢？您的问题中可能缺少一些信息。

这是一个相当复杂的 this 和 => 链。我没有看到错误，但是通过“眼睛”进行调试很糟糕。添加大量 console.logs(1)、console.logs(2) 等以查看代码中断的确切位置。当你有这条线时，输出 this 和 this.state。只有两个选项可能是错误的：错误的 this 或 this.state 只是未定义。有了这些信息，在大多数情况下修复错误就相对简单了。

我发现，它必须对我正在使用的库做一些事情 ProductQuickWatch 组件调用 “pure-react-carousel”。 Here 是一个类似的错误。当我删除它时，我可以将加载状态设置为 false。我必须更多地研究这个错误。谢谢你的答案。