如何在 ReactJS 中解析 Json 对象

Question

我想解析reactJS中的JSON列表。 这是我正在使用的模型

public class ModelEmployee
{
public List<Employeelist> Employees { get; set; }
public int count { get; set; }
public int Pagenumber { get; set; }
}
public class Employeelist
{
public int EmployeeID { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Phone { get; set; }
public int RoleId { get; set; }
public string RoleName { get; set; }
public List<string> Roles { get; set; }
}

我的控制器是

public ActionResult Index(int pageNum = 1)
{
ModelEmployee model = new ModelEmployee();   
model = new ModelEmployee();
model.Employees = FetchAllDevices(pageNum, 10);
model.count = (int)Math.Ceiling((float)_empService.TotalCount() / _pageSize);
model.Pagenumber = pageNum;
return Json(model,JsonRequestBehavior.AllowGet);            
}

这是我在 ReactJS 代码中尝试提取每个值的方法

componentWillMount: function(){  
var xhr = new XMLHttpRequest();  
xhr.open('get', this.props.url, true);  
xhr.onload = function () {  
var response = JSON.parse(xhr.responseText);   
this.setState({ result: response });
}.bind(this);  
xhr.send();  
},  
render: function(){  
var rows = [];  
this.state.result.Employees.forEach(function (item) {  
rows.push(<EmployeeRow  key={item.EmployeeID} item={item }/>);  
});

它不起作用。但是当我用这个改变设置状态时，

this.setState({ result: response.Employees });

它将正常工作，可以通过"员工"列表。但无法访问页码和计数变量。你能帮我解决这个问题吗？ 提前谢谢。

Answer 1

为什么不将计数和页码也存储在该州？

this.setState({ 
employees: response.Employees,
count: response.count,
pageNumber: response.PageNumber
});

然后，您可以分别从this.state.pageNumber和this.state.count访问页号和计数。

Answer 2

在 XHR 的 onLoad 回调中，应确保检查 readyState，以确保响应已完成：

xhr.onload = function () {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200) { // optionally check the status
var response = JSON.parse(xhr.responseText);   
this.setState({ result: response });
}
}
}.bind(this);

这可确保您正在阅读已完成的响应。试试这个，看看这是否解决了问题