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

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 作为字符串并显示它？

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

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.

Answer 1

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