无法读取组件中的对象，请作出反应
无法读取组件中的对象，请作出反应
提问于 2020-01-06 20:36:20
在React组件中读取对象的值有问题。我试图读和写"recordCount“，但是我发现错误的地方是：
TypeError:无法读取未定义的属性“recordCount”。
知道它为什么要抛出错误吗？
import React, { Component } from 'react';
export class UrunlerComponentList extends Component {
displayName = UrunlerComponentList.name
constructor(props) {
super(props);
this.state = { urunler_: [], recordCount: 0, loading: true };
}
componentDidMount() {
fetch('http://localhost:55992/api/search/arama?q=&PageIndex=1')
.then(response => response.json())
.then(data => {
this.setState({ urunler_: data.products, recordCount: data.RecordCount, loading: false });
});
}
static renderUrunlerTable(urunler_) {
return (
<div>
<header className="mb-3">
<div className="form-inline">
<strong className="mr-md-auto"> {recordCount} Items found </strong>
</div>
</header>
{
urunler_.map(urun =>
<article className="card card-product-list">
...............................
...............................
...............................
</article>
)}
</div>
);
}
render() {
let contents = this.state.loading
? <p><em>Loading...</em></p>
: UrunlerComponentList.renderUrunlerTable(this.state.urunler_);
return (
<div>
{contents}
</div>
);
}
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-01-06 20:37:58
由于您使用的是静态方法，这不会引用组件，因此，this.state是未定义的。
您可以使该方法成为非静态的，并且该方法应该可以工作。此外，如果不使用箭头函数，则需要在构造函数中绑定该方法。
import React, { Component } from 'react';
export class UrunlerComponentList extends Component {
displayName = UrunlerComponentList.name
constructor(props) {
super(props);
this.state = { urunler_: [], recordCount: 0, loading: true };
this.renderUrunlerTable = this.renderUrunlerTable.bind(this);
}
componentDidMount() {
fetch('http://localhost:55992/api/search/arama?q=&PageIndex=1')
.then(response => response.json())
.then(data => {
this.setState({ urunler_: data.products, recordCount: data.RecordCount, loading: false });
});
}
renderUrunlerTable(urunler_) {
return (
<div>
<header className="mb-3">
<div className="form-inline">
<strong className="mr-md-auto"> {this.state.recordCount} Items found </strong>
</div>
</header>
{
urunler_.map(urun =>
<article className="card card-product-list">
...............................
...............................
...............................
</article>
)}
</div>
);
}
render() {
let contents = this.state.loading
? <p><em>Loading...</em></p>
: this.renderUrunlerTable(this.state.urunler_);
return (
<div>
{contents}
</div>
);
}
}使用此代码片段而不是您的代码片段。
Stack Overflow用户
发布于 2020-01-06 20:49:10
请在componentDidMount()(推荐)中移动您的提取调用，或者如果您想要获取构造函数，请使用-> this.state ={ urunler_：data.products，recordCount: data.RecordCount，your : false }
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59618628
复制相关文章
相似问题
腾讯云开发者
