问题描述
在我的示例中,我从 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。 我必须更多地研究这个错误。谢谢你的答案。