Tajuk ditulis semula sebagai: Walau apa pun, saya tidak boleh mendapatkan nilai daripada tatasusunan saya

Question

Saya cuba memaparkan data daripada tatasusunan dalam komponen React saya.

Saya boleh melihat data yang saya perlukan dalam konsol pembangun penyemak imbas melalui console.log():

FinalRecords.js::recordTitle: (4)

0: {ahli: Array(10), id: 62, tajuk: 'RR 1980 Record 1', storeId: 1088}
1: {ahli: Array(10), id: 63, tajuk: 'RR 1980 Record 2', storeId: 1088}
2: {ahli: Array(10), id: 64, tajuk: 'RR 1980 Record 3', storeId: 1088}
3: {ahli: Array(10), id: 65, tajuk: 'RR 1980 Record 4', storeId: 1088}
panjang: 4
[[Prototaip]]: Tatasusunan(0)

Tetapi saya seperti tidak dapat memikirkan cara untuk mendapatkan tajuk.

Saya telah mencuba banyak perkara yang berbeza, yang ini adalah yang paling terkini:

render() {
        const { recordId, records, bandName } = this.props;

        var data = records.filter((r) => r.id === recordId);

        var rekod = data.toArray();

        console.log("FinalRecords.js :: recordTitle: ", rekod);

        kembalikan <div> rekod - {findRecordTitle(records, recordId) } - {bandName ||.
    }

}

function findRecordTitle(rekod, id) {
    kembalikan rekod.cari((rekod) => {
        kembalikan rekod.id === id;
    })
}

Saya perlu mendapatkan tajuk rekod dengan menggunakan id.

Tetapi ia sentiasa kosong.

Adakah saya melakukan sesuatu yang salah?

Answer 1

Nama fungsi ini bermakna anda mengharapkan ia mengembalikan "tajuk" (yang saya akan tafsirkan sebagai nilai rentetan):

function findRecordTitle(records, id) {
    return records.find((record) => {
        return record.id === id;
    })
}

Namun, tiada kaitan dalam fungsi ini dengan "tajuk". Ia mengembalikan atribut records数组中的一个匹配对象（或null）。如果你只想返回该对象的title, hanya mengembalikan atribut ini:

function findRecordTitle(records, id) {
    return records.find((record) => {
        return record.id === id;
    })?.title; // <--- 这里
}

---

EDIT: Jika persekitaran JavaScript anda tidak berfungsi dengan perantaian pilihan, anda boleh menyemak null secara eksplisit sebelum cuba menggunakan objek:

function findRecordTitle(records, id) {
    const record = records.find((record) => {
        return record.id === id;
    });
    return record ? record.title : null;
}

Atau ia boleh lalai kepada rentetan kosong dan bukannya null dsb.