Question

我正在使用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作为字符串显示出来？

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

未捕获（承诺）错误：对象作为React子对象无效（找到：带有键{iddrzava，naziv}的对象）。如果您打算渲染一个子项的集合，请改用数组或使用来包装对象来自React附加组件的createFragment（object）。检查渲染方法的FetchNaselje。

Answer 1

您可以使用。像我在下面提到的那样获取值或将键名传递给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>
)}

OR

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

编辑：

您需要将drzava: string = ""更改为drzava: object = {}

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

Answer 2

您需要更改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 =>
    <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>
)}

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

2 个答案: