標題重寫為：無論如何，我都無法從我的陣列中取得一個值

Question

我正在嘗試在我的React元件中顯示來自陣列的資料。

我可以在瀏覽器開發者控制台中透過console.log()看到我需要的資料：

FinalRecords.js :: recordTitle: (4)

0: {members: Array(10), id: 62, title: 'RR 1980 Record 1', storeId: 1088}
1: {members: Array(10), id: 63, title: 'RR 1980 Record 2', storeId: 1088}
2: {members: Array(10), id: 64, title: 'RR 1980 Record 3', storeId: 1088}
3: {members: Array(10), id: 65, title: 'RR 1980 Record 4', storeId: 1088}
length: 4
[[Prototype]]: Array(0)

但我似乎無法弄清楚如何取得title。

我嘗試了很多不同的方法，其中這個是最近的一個：

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

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

        var records = data.toArray();

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

        return <div> record - {findRecordTitle(records, recordId) } - {bandName || ''} </div>
    }

}

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

我需要透過使用id來取得記錄的title。

但它總是空白的。

我做錯了什麼嗎？

Answer 1

這個函數的名稱意味著你期望它回傳一個"標題"（我會解釋為字串值）：

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

然而，這個函數中沒有任何地方與"標題"有任何關聯。它傳回records陣列中的一個符合物件（或null）。如果你只想傳回該物件的title屬性，只需傳回該屬性：

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

---

編輯：如果你的JavaScript環境無法使用選用鏈，你可以在嘗試使用物件之前先明確檢查null：

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

或可以預設為空字串而不是null等。