Javascript 如何访问对象数组中嵌套对象的JSON属性

我正在使用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>;
    }

我的问题是如何访问数组中的对象drzava以获取属性naziv作为字符串并显示它

我在控制台中遇到以下错误：

未捕获（承诺中）错误：对象作为子对象无效 （找到：具有键{iddrzava，naziv}的对象）。如果你想呈现一个 子对象的集合，使用数组代替或使用 从React加载项创建片段（对象）。检查渲染方法 属于

FetchNaselje

---

你可以使用。获取值或将键名传递给drzava的符号，如我在下面提到的

{naseljeList.map(nas =>
  <tr key={nas.idnaselje}>
      <td></td>
      <td>{nas.idnaselje}</td>
      <td>{nas.naziv}</td>
      <td>{nas.postanskiBroj}</td>
      <td>{nas.drzava && 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>
)}

---

您需要更改

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;
}

然后，在render方法中，只需使用点表示法即可获得drzava的名称（naziv）：

{naseljeList.map（nas=>
{nas.idnaselje}
{nas.naziv}
{nas.postanskiBroj}
{nas.drzava.naziv}
this.handleEdit（nas.idnaselje）}>Edit|
this.handleDelete（nas.idnaselje）}>Delete
)}

你也可以使用

nas.drzava.naziv

EDIT:nevermind，看到了你编辑的postwow，它成功了，但我有点困惑。。。因为我的drzava仍然定义为字符串NaseljeData@ToneCrate我同意too@ChenChi对不起，我没有收到你的信question@Think-两次，因为我的NaseljeData drzava被定义为string，所以当我放置drzava.naziv时，我得到的错误是：类型string上不存在属性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 && 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>
    )}

export class NaseljeData {
    idnaselje: number = 0;
    naziv: string = "";
    postanskiBroj: string = "";
    drzava: object = {};
    drzavaid: number = 0;
}

export class DrzavaData {
    iddrzava: number = 0;
    naziv: string = "";
}

export class NaseljeData {
    idnaselje: number = 0;
    naziv: string = "";
    postanskiBroj: string = "";
    drzava: DrzavaData = null;
    drzavaid: number = 0;
}

{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>
)}