标题重写为:无论如何,我都无法从我的数组中获取一个值
P粉308783585
P粉308783585 2023-08-18 15:22:01
[React讨论组]

我正在尝试在我的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

但它总是空白的。

我做错了什么吗?

P粉308783585
P粉308783585

全部回复(1)
P粉343408929

这个函数的名称意味着你期望它返回一个"标题"(我会解释为一个字符串值):

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等。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号