如何访问绑定到ReactJS中组件状态的JSON对象的值

我从WebService获取JSON数据，并将其初始化为状态。 在UI中，我想直接将一个值绑定到textbox值字段

在这里，我能够记录prod的值

但在将值绑定到textbox时，我得到错误“无法获取未定义或空引用的属性”：

import*as React from'React'；
从“jquery”导入*为$；
接口IBudgeTrequestreadoly{
数据：[任何]；
}
导出类BudgetRequestReady仅扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[{}]，
};
}
componentDidMount（）{
const RequestNumber=this.props.RequestNumber；
$.ajax({
类型：“POST”，
url:“主页/GetRequestByRequestID”，
数据类型：“json”，
数据：{requestID:RequestNumber}，
成功：功能（msg）{
如果（味精）{
this.setState（{data:msg}）；
console.log（this.state.data[“product”].product）；
}
}.绑定（此），
错误：函数（msg）{
}
});
}
公共渲染（）{
返回
产品需求*


;
}
}

这是因为ajax请求是异步的。目前这种情况正在发生：

您的构造函数被调用

调用render（）

组件名为

问题是，您试图绑定的

render

函数

this.state.data.product.product

在第一次装载时并不存在。因此，trowing错误无法获取未定义或空引用的属性，因为

this.state.data.product

在

this.state.data

中不存在

您可以在组件状态中设置默认值：

constructor(props) {
    super(props);

    this.state = {
        data: {
          product: {
            product: '',
          }
        },
    };
}

默认情况下，

This.state.data.product.product

将作为空字符串，从API获取数据并更新状态后，将设置实际的

data.product.product

---

现在您可以使用

而不会出现错误。

请以文本格式包含问题中的所有代码，而不是链接到外部图像。在成功回调中，您应该记录

setState

回调的结果，因为

setState

是异步的。要添加到@Tholle的注释中，还可以查看问题的其余部分组件的代码。我已经添加了代码，您确定不是

this.state.data[“product”].product

给出错误吗？您还可以将

数据

初始化为具有空对象的数组，然后在render方法中尝试使用

this.state.data[“product”]

访问它。你确定这就是你想要的吗？谢谢你回复alserda，但我能够访问这个.state.data[“product”]，而product只是一个键，文本框值字段中没有任何问题。但是，当产品是一个对象时，我无法访问产品的子对象。收到API的响应后，您可以发布

msg

的内容吗？{“isNew”：true，“productId”：2，“accountNumberId”：2，“units”：1，“unitCost”：1，“totalCost”：1.04，“category”：“a”，“dataSource”：“a”，“classExpense”：“a”，“initiative”：“a”，“货币”：“a”，“useFullLife”：12，“productSoftwareLicenseId”：319，“productSoftwareLicense”：“a”，“assetDescriptionId”：19，“评论”：“a”，“createdByName”：“Teja Swaroop”，“createdOn”：“2018-07-13T11:50:00”，“product”：{“productId”：2，“product”：“Upgrade”，“isActive”：true}我已经更新了我的答案，这应该可以解决您的问题。如果不使用产品对象初始化状态，是否可以完成此操作？我能知道原因吗。数据中不是包含了所有未定义的值吗？