Question

我正在从后端获取数据，它具有一个称为标头的特定子部分，该子部分还具有一个附加的名称：值对。像这样-data : { headers : {name:"Nishant", value:"random" } }，我想显示模式中的所有字段，当我尝试使用Object.keys()时，抛出此错误-“无法将未定义或null转换为对象”。

render(){
 return(
   let request_data = this.props.head // has the entire data
   let data = request_data.headers //contains the headers section to be displayed.
   <div className="modal-body">
            <div className="row">
              <div className="col-lg-6">
              {
                <div>
                  {// want to display the headers data here }
                  { (request_data.body !== '') ? <div>Body : {request_data.body}</div> : ''}
                </div>
              }
              </div>
           </div>
    </div>
 );
}

不确定我尝试使用Object.keys时该怎么做，但是抛出错误“无法将未定义或null转换为对象”。虽然通过使用JSON.stringify（）可以得到结果，但没有达到预期的外观。

Answer 1

在<pre>标签中呈现文本并使用JSON.stringify

<pre>{JSON.stringify(request_data.body,null,2)}</pre>

Answer 2

如果收到有效响应。例如：

{
"data": {
    "headers": {
        "name": "Nishant",
        "value": "random"
    }
}
}

var responseData = JSON.parse('{ "data": { "headers": { name: "Nishant", value: "random" } } }')

第一个选项将在数据对象中显示值，第二个选项将在标头对象中显示值。

<pre>responseData.data</pre> 
<pre>responseData.data.headers</pre>

Answer 3

在获取值之前，检查头不是未定义的；

            <div className="col-lg-6">
                {
                    <div>
                        {request_data.header ? Object.values(request_data.header).map(value => value) : null}

                        {(request_data.body !== '') ? <div>Body : {request_data.body}</div> : ''}
                    </div>
                }
            </div>

无法显示从后端作为对象接收的数据，

3 个答案: