我正在使用react.JS作为前端来处理简单的CRUD示例,我遇到了一个问题,这可能是因为我缺乏使用React或JavaScript的经验。
这是我从 API 获取的 JSON:
[{"idnaselje":1,"naziv":"Zagreb","postanskiBroj":10000,"drzavaId":1,"drzava":{"iddrzava":1,"naziv":"Hrvatska"}},{"idnaselje":2,"naziv":"Rijeka","postanskiBroj":51000,"drzavaId":1,"drzava":{"iddrzava":1,"naziv":"Hrvatska"}},{"idnaselje":14,"naziv":"Dubrava","postanskiBroj":10040,"drzavaId":1,"drzava":{"iddrzava":1,"naziv":"Hrvatska"}},{"idnaselje":15,"naziv":"Zadar","postanskiBroj":23000,"drzavaId":1,"drzava":{"iddrzava":1,"naziv":"Hrvatska"}}]
我正在尝试映射 drzava.naziv 以显示 naziv...
这是我的渲染方法:
private renderNaseljeTable(naseljeList: NaseljeData[]) {
return <table className='table'>
<thead>
<tr>
<th></th>
<th>ID Naselje</th>
<th>Naziv</th>
<th>Postanski Broj</th>
<th>Drzava</th>
</tr>
</thead>
<tbody>
{naseljeList.map(nas =>
<tr key={nas.idnaselje}>
<td></td>
<td>{nas.idnaselje}</td>
<td>{nas.naziv}</td>
<td>{nas.postanskiBroj}</td>
<td>{nas.drzava}</td>
<td>
<a className="action" onClick={(id) => this.handleEdit(nas.idnaselje)}>Edit</a> |
<a className="action" onClick={(id) => this.handleDelete(nas.idnaselje)}>Delete</a>
</td>
</tr>
)}
</tbody>
</table>;
}
这是NaseljeData的数据结构:
export class NaseljeData {
idnaselje: number = 0;
naziv: string = "";
postanskiBroj: string = "";
drzava: string = "";
drzavaid: number = 0;
}
我的问题是如何访问数组内的对象 drzava 以将属性 naziv 作为字符串获取并显示它?
我在控制台中收到以下错误:
Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {iddrzava, naziv}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of
FetchNaselje
.
最佳答案
您需要更改 NaseljeData
的数据结构,将 drzava
作为对象而不是字符串。例如,您可以这样:
export class DrzavaData {
iddrzava: number = 0;
naziv: string = "";
}
export class NaseljeData {
idnaselje: number = 0;
naziv: string = "";
postanskiBroj: string = "";
drzava: DrzavaData = null;
drzavaid: number = 0;
}
然后,在渲染方法中,您可以使用点符号来获取 drzava 的名称 (naziv):
{naseljeList.map(nas =>
<tr key={nas.idnaselje}>
<td></td>
<td>{nas.idnaselje}</td>
<td>{nas.naziv}</td>
<td>{nas.postanskiBroj}</td>
<td>{nas.drzava.naziv}</td>
<td>
<a className="action" onClick={(id) => this.handleEdit(nas.idnaselje)}>Edit</a> |
<a className="action" onClick={(id) => this.handleDelete(nas.idnaselje)}>Delete</a>
</td>
</tr>
)}
关于javascript - 如何访问对象数组内嵌套对象的 JSON 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52758492/