尽管使用箭头语法，但无法读取未定义的属性'state'

Question

在我的示例中，我从API获取一个Product-Object。该产品有ImageId，指的是Images，在获取产品后，我还从API获取这些Images。

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((中(之前，一切都很好。

如果我省略了将loading设置为false，那么一切都很好。但我不知道为什么。如果您查看render((，则加载状态很重要。

我对此进行了研究，一个可能的解决方案是在构造函数中绑定函数。但通常如果你使用箭头语法"；这个"；不是问题。我也试过了，但没有成功：/。

错误：

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 | }

Answer 1

有趣的讨论；(我会把这个作为一个答案，尽管它并不是真正的答案。但它太长了，评论太乱了。两点：

1. 此部分

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

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

2. 这是一个相当复杂的this和=>链。我没有看到错误，但通过"；眼睛；只是很糟糕。添加大量的console.logs(1)、console.logs(2)等等，看看代码到底在哪里中断。当您有行时，输出this和this.state。只有两种选择可能是错误的：错误的这个或这个。状态只是没有定义。有了这些信息，在大多数情况下修复错误相对简单

Answer 2

我发现，它必须与我在ProductQuickWatch组件调用"纯反应转盘">。这里有一个类似的错误。当我删除它时，我可以将加载状态设置为false。我必须对那个错误多做一些研究。谢谢你的回答。