ReactJS-TypeError：无法读取未定义的属性“name”
class App extends Component {
constructor(props) {
super(props)
this.state = {
products: {},
}
this.fetchDevices = this.fetchDevices.bind(this);
}
async fetchDevices() {
const url = 'my url';
const response = await fetch(url, {method : 'GET', headers : headers});
const data = await response.json()
this.setState({products : data.value})
}
componentDidMount() {
this.fetchDevices();
}
render() {
return (
<div>
{this.state.products ? <p>{this.state.products[0].name}</p> : null}
</div>
)}
}
export default App
{
"value": [
{
"urn": null,
"name": "New_COMEC",
"description": null,
"icon": "icon-energy-meter",
"customIdFormat": null,
"customIdDisplay": true,
"customIdRequired": true,
"serialNumberFormat": null,
"serialNumberDisplay": true,
"serialNumberRequired": false,
....,
}
]
共有1个答案
您已将产品状态初始化为空对象而不是数组。render方法将在fetch调用之前调用，因此应用程序中断。因为您已初始化为对象，
{this.state.products ? <p>{this.state.products[0].name}</p> : null}
在初始呈现中为true，因此它试图在当时状态实际上是对象时获取第一个数组元素。
你的代码应该像
class App extends Component {
constructor(props) {
super(props)
this.state = {
products: [],
};
{Array.isArray(this.state.products) && this.state.products[0] ? <p>{this.state.products[0].name}</p> : null}
-
运行此代码时，在的第一行出现错误 TypeError：无法读取未定义的属性“array” 代码： 我试着搜索，但没有得到正确的解。
-
问题内容： 运行此代码时，我在第一行出现错误 TypeError：无法读取未定义的属性“数组” 码： 我尝试搜索，但没有得到正确的解决方案。 问题答案： 道具类型现在是一个单独维护的库，名称为 这里是react- docs的解释：https : //reactjs.org/docs/typechecking-with- proptypes.html 您必须将它们导入为 NPM套餐
-
有人可以解释为什么我得到一个错误，当我使用此语法 但是当我使用箭头指针语法时没有错误，如下所示 注意：在这两种情况下，我都使用过 在 内。
-
问题内容： 我正在尝试在ReactJS中创建一个简单的TODO列表应用程序。我对React的基础知识不太清楚，所以我被困在这里。 生成每个列表后，将为其分配一个复选框。代码在没有onChange事件到Checkbox的情况下工作正常。但是，将“已检查”功能分配给它时，会产生错误。 未捕获的TypeError：无法读取未定义的属性“已检查” 提前致谢 问题答案： 您需要设置的（你可以做到这一点通过第
-
我目前使用两个组件，并在这两个组件上实现了react Route。但是当我单击父组件viewall.js时，我无法从我的模拟json服务器api中获取值，这个错误显示： viewall.js
-
我试图用ReactJS更新组件的状态，但得到以下错误。下面提供了错误和代码。 可能未处理的拒绝[1]类型错误：无法读取未定义的属性“setState”