<p>I'm trying to display data from an array in my React component. </p> <p>I can see the data I need in the browser developer console via <code>console.log()</code>: </p> <pre class="brush:php;toolbar:false;">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)</pre> <p>But I can't seem to figure out how to get the <code>title</code>. </p> <p>I've tried a lot of different things, this one being the most recent: </p> <pre class="brush:php;toolbar:false;">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; }) }</pre> <p>I need to get the <code>title</code> of the record by using <code>id</code>. </p> <p>But it's always blank. </p> <p>Did I do something wrong? </p>

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

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

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