如何根据 ReactJS 中的动态值向数组添加附加信息答案

【问题标题】：How to add additional information to an array based on dynamic values in ReactJS如何根据 ReactJS 中的动态值向数组添加附加信息
【发布时间】：2022-01-17 02:42:58
【问题描述】：

我正在尝试添加一个小跟踪组件，该组件从数组中引入跟踪号和承运人。从那里，它应该向运营商网站添加一个 url。我需要添加一个 if 语句或其他东西，所以当它看到特定的运营商时，它会添加 url，但我很挣扎。

renderTrackingNumbers() {
    const { order: { tracking_info } } = this.props;

    const trackingNumbers = tracking_info.map((tracking_info) => (
        <div key={ tracking_info.id }>
            <a href="{ tracking_url_should_be_added_here }">{ tracking_info.tracking_number }</a>
            { ' ' }
            -
            { ' ' }
            { tracking_info.carrier_code }
        </div>
    ));

    return (
        <div>
            <h4>{ __('Tracking Numbers') }</h4>
            <div>
                { trackingNumbers }
            </div>
        </div>
    );
}

这是我从 GraphQL 收到的数据：

[
{
    "tracking_number": "231300687629630",
    "carrier_code": "fedex"
},
{
    "tracking_number": "1234567890",
    "carrier_code": "dhl"
},
{
    "tracking_number": "1Z12345E0305271640",
    "carrier_code": "ups"
},
{
    "tracking_number": "123465789123456",
    "carrier_code": "usps"
}
]

任何帮助都会很棒。

【问题讨论】：

标签： javascript arrays reactjs graphql

【解决方案1】：

尝试像这样映射数组

arr.map(i=>{return {
    ...i ,
    url:i.carrier_code==='fedex'?'www.fedex.com':
                           i.carrier_code==='dhl'?'www.dhl.com':'you name it'}}
)

当你遍历这个时，它会像：

<a href="{i.url }">...</a>

【讨论】：