Titre réécrit comme suit : Quoi qu'il en soit, je ne parviens pas à obtenir une valeur de mon tableau

Question

J'essaie d'afficher les données d'un tableau dans mon composant React.

Je peux voir les données dont j'ai besoin dans la console du développeur du navigateur via console.log() :

FinalRecords.js::recordTitle : (4)

0 : {membres : Array(10), identifiant : 62, titre : 'RR 1980 Record 1', storeId : 1088}
1 : {membres : Array(10), identifiant : 63, titre : 'RR 1980 Record 2', storeId : 1088}
2 : {membres : Array(10), identifiant : 64, titre : 'RR 1980 Record 3', storeId : 1088}
3 : {membres : Array(10), identifiant : 65, titre : 'RR 1980 Record 4', storeId : 1088}
longueur : 4
[[Prototype]] : Array(0)

Mais je n'arrive pas à comprendre comment obtenir le title.

J'ai essayé beaucoup de choses différentes, celle-ci étant la plus récente :

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 
 enregistrement - {findRecordTitle(records, recordId) } - {bandName ||
    }

}

fonction findRecordTitle (enregistrements, identifiant) {
    return records.find((record) => {
        return record.id === id;
    })
}
Je dois obtenir le title de l'enregistrement en utilisant id. 
Mais c'est toujours vide. 
Ai-je fait quelque chose de mal ? 
            

Answer 1

Le nom de cette fonction signifie que vous vous attendez à ce qu'elle renvoie un "titre" (que j'interpréterais comme une valeur de chaîne) :

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

Cependant, nulle part dans cette fonction cela n'a rien à voir avec le "titre". Il renvoie l'attribut records数组中的一个匹配对象（或null）。如果你只想返回该对象的title, retournez simplement cet attribut :

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

---

EDIT : Si votre environnement JavaScript ne fonctionne pas avec le chaînage facultatif, vous pouvez vérifier explicitement null avant d'essayer d'utiliser l'objet :

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

Ou il peut utiliser par défaut une chaîne vide au lieu de null etc.