使用Carbon in React/Laravel项目进行本地化（更改日期语言）

Question

尝试在我的项目中使用碳进行本地化。碳纤维很好，我已经测试过了。我已尝试将下面的代码块添加到我的模型文件中：

use DateTimeInterface;

protected function serializeDate(DateTimeInterface $date)
{
    return $date->translatedFormat('A B M');
}

所以我的模型文件看起来像这样（文件-

<?php

namespace App\Models;

use App\Events\TransferRecordSaved;
use App\Helpers\CoinFormatter;
use Illuminate\Database\Eloquent\Model;
use DateTimeInterface;

class TransferRecord extends Model
{
    /**
     * The attributes that aren't mass assignable.
     *
     * @var array
     */
    protected $guarded = [];

    /**
     * The event map for the model.
     *
     * @var array
     */
    protected $dispatchesEvents = [
        'saved' => TransferRecordSaved::class,
    ];

    protected $appends = [
        'value_price',
        'hash',
        'formatted_value_price',
        'coin',
        'confirmed',
    ];

    /**
     * The relationships that should always be loaded.
     *
     * @var array
     */
    protected $with = [
        'walletAccount',
    ];

    /**
     * @return bool
     */
    public function getConfirmedAttribute()
    {
        return $this->confirmations >= $this->required_confirmations;
    }

    /**
     * @return mixed|string
     */
    public function getCoinAttribute()
    {
        return $this->walletAccount->wallet->coin->name;
    }

    /**
     * @param $value
     */
    public function setValueAttribute($value)
    {
        if ($value instanceof CoinFormatter) {
            $this->attributes['value'] = $value->getAmount();
        } else {
            $this->attributes['value'] = (float) $value;
        }
    }

    /**
     * @return CoinFormatter|mixed
     */
    public function getValueObject()
    {
        return coin($this->getOriginal('value'), $this->walletAccount->wallet->coin);
    }

    /**
     * Get value converted from base unit
     *
     * @param $value
     * @return float
     */
    public function getValueAttribute()
    {
        return $this->getValueObject()->getValue();
    }

    /**
     * Get the price of the value
     *
     * @return \HolluwaTosin360\Currency\Currency|string
     */
    public function getValuePriceAttribute()
    {
        return $this->getValueObject()
            ->getPrice($this->walletAccount->user->currency, $this->dollar_price);
    }

    /**
     * Get formatted price of the value
     *
     * @return \HolluwaTosin360\Currency\Currency|string
     */
    public function getFormattedValuePriceAttribute()
    {
        return $this->getValueObject()
            ->getFormattedPrice($this->walletAccount->user->currency, $this->dollar_price);
    }

    /**
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo|WalletAddress
     */
    public function receiverWalletAddress()
    {
        return $this->belongsTo('App\Models\WalletAddress', 'receiver_wallet_address_id', 'id');
    }

    /**
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo|WalletTransaction
     */
    public function walletTransaction()
    {
        return $this->belongsTo('App\Models\WalletTransaction', 'wallet_transaction_id', 'id');
    }

    /**
     * Get transaction hash
     *
     * @return mixed
     */
    public function getHashAttribute()
    {
        return $this->walletTransaction()->value('hash');
    }

    /**
     * @return \Illuminate\Database\Eloquent\Relations\BelongsTo|WalletAccount
     */
    public function walletAccount()
    {
        return $this->belongsTo('App\Models\WalletAccount', 'wallet_account_id', 'id');
    }



protected function serializeDate(DateTimeInterface $date)
{
    return $date->translatedFormat('A B M');
}
}

然后在resources/routes/wallet/components/RecorsTable/index.js文件中，我试图使用translatedFormat（）函数以转换后的格式获取日期。所需的值是{formatUTC（text）}：

dataIndex : 'created_at',
            sorter    : (a, b) => sortDate(a.created_at, b.created_at),
            render    : text => (
                <div style={{whiteSpace : 'nowrap'}}>
                    {formatUTC(text)}
                </div>

resources/routes/wallet/components/RecorsTable/index.js的完整版本文件：

import React, {Component} from 'react';
import {Tag} from "antd";
import Widget from "components/Widget";
import {FormattedMessage, injectIntl} from "react-intl";
import AsyncTable from "components/AsyncTable";
import {route} from "support/Services/Api";
import Auth from "support/Auth";
import {formatUTCDate, pipe, sortDate} from "support/utils/common";
import {connect} from "react-redux";
import {mapValues, values} from "lodash";

class RecordsTable extends Component {
    columns = () => {
        const {accounts} = this.props;

        return [
            {
                title     : (
                    <FormattedMessage
                        defaultMessage="Amount"
                        id="common.amount"/>
                ),
                dataIndex : 'formatted_value_price',
                render    : (text, record) => (
                    <span>
                        {record.type === 'receive' ?
                            <span className="cp-text-success">
                                {text}
                            </span> :
                            <span className="cp-text-danger">
                                {text}
                            </span>
                        }
                    </span>
                )
            },
            {
                title     : (
                    <FormattedMessage
                        defaultMessage="Date"
                        id="widget.marketplace_earnings_chart.date"/>
                ),
                dataIndex : 'created_at',
                sorter    : (a, b) => sortDate(a.created_at, b.created_at),
                render    : text => (
                    <div style={{whiteSpace : 'nowrap'}}>
                        {translatedFormat(text)}
                    </div>
                ),
            },
            {
                title     : 'Status',
                dataIndex : 'confirmed',
                render    : (text) => {
                    const isConfirmed = text === "true" ||
                        (typeof text === "boolean" && text);

                    return (
                        <span>
                            {isConfirmed ?
                                <Tag color="green">
                                    <FormattedMessage
                                        defaultMessage="confirmed"
                                        id="wallet.transaction_confirmed"/>
                                </Tag> :
                                <Tag color="red">
                                    <FormattedMessage
                                        defaultMessage="unconfirmed"
                                        id="wallet.transaction_unconfirmed"/>
                                </Tag>
                            }
                        </span>
                    )
                },
            },
            {
            title     : (
                    <FormattedMessage
                        defaultMessage="Amount"
                        id="common.amount"/>
                ),
                dataIndex : 'value',
            },
            {
                title     : 'Hash',
                dataIndex : 'hash',
            },
            {
                title     : 'Coin',
                dataIndex : 'coin',
                fixed     : 'right',
                onFilter  : (value, record) => {
                    return record.coin.includes(value)
                },
                filters   : values(mapValues(accounts, (o) => {
                    return {
                        text  : o.wallet.coin.name,
                        value : o.wallet.coin.name
                    }
                })),
            },
        ];
    };

    render() {
        const endpoint = route("user.transfer-records-table");

        return (
            <Widget styleName="cp-card-table"
                    title={
                        <FormattedMessage
                            defaultMessage="Transfer Records"
                            id="wallet.transfer_records"/>
                    }>
                <AsyncTable
                    route={endpoint.url()}
                    columns={this.columns()}
                    className="mt-1"
                    scroll={{x : true, y : false}}
                    size="middle"/>
            </Widget>
        );
    }
}

const mapStateToProps = ({
    wallet : {accounts},
    auth
}) => ({
    accounts,
    auth : new Auth(auth)
});

export default pipe(
    injectIntl,
    connect(
        mapStateToProps
    )
)(RecordsTable);

{translatedFormat（text）}-这是formatUtc（text）之前和工作正常。成功编译后打开网页时出错。已经一周了，我一直在努力解决这个问题，但到目前为止还没有成功。任何帮助将高度赞赏。




Answer 1

任何拥有reactjs/laravel项目的人都可以通过使用utcDateCalendarTime（）更改方法来解决本地化问题。因此，如果我像下面这样更改代码块，它的效果非常好：

dataIndex : 'created_at',
                sorter    : (a, b) => sortDate(a.created_at, b.created_at),
                render    : text => (
                    <div style={{whiteSpace : 'nowrap'}}>
                        {utcDateCalendarTime(text)}
                    </div>
                ),

并且需要确保您正在调用文件顶部的方法：import{formatUTCDate，pipe，sortDate，utcDateCalendarTime}from“support/utils/common”