Question

我有一组日期/时间字符串，我试图将moment对象存储在我的React应用程序的状态树中。然后我尝试在我的组件中显示格式化的这些对象，如下所示：

{ ticket.reportDateUtc.format('YYYY-MM-DD hh:mm a') }

当我尝试在我的React应用程序中查看此组件时，会导致以下错误：

TypeError: ({_isAMomentObject:true, _i:"2015-10-05T20:06:58Z", 
                _f:"YYYY-MM-DDTHH:mm:ssZ", _tzm:-0, _isUTC:false, 
                _pf:{empty:false, unusedTokens:[], unusedInput:[], overflow:-1, charsLeftOver:0, nullInput:false, invalidMonth:null, invalidFormat:false, userInvalidated:false, iso:true},
                _locale:{_ordinalParse:/\d{1,2}(th|st|nd|rd)/, ordinal:(function (number) {
"use strict";
var b = number % 10,
    output = (toInt(number % 100 / 10) === 1) ? 'th' :
    (b === 1) ? 'st' :
    (b === 2) ? 'nd' :
    (b === 3) ? 'rd' : 'th';
return number + output;
}), _abbr:"en", _ordinalParseLenient:/\d{1,2}(th|st|nd|rd)|\d{1,2}/}, _d:(new Date(1444075618000))}) is not extensible

但是，如果我将moment格式化为字符串保存到状态，然后在组件中显示该字符串，它会成功显示（但我不想这样做，所以我可以重用该对象使用不同的格式选项）。 react docs似乎表示我正在使用正确的语法（它们的示例完全相同，但使用Javascript的内置Date对象）。有什么我做错了，或者当时库在React组件中无法正常工作？

编辑：这是表现问题的渲染方法之一：

render() {
    const ticket = this.props.ticket;
    const notes = ticket.notes.map(note => <TicketRowNote key={note.id} note={note}/>);
    return (
        <tr className="pointer" onClick={history.replaceState.bind(this, null, `/tickets/${ticket.id}`)}>
            <td>{ ticket.id }</td>
            <td>
                <i className="fa fa-flag"/>
            </td>
            <td className="text-right no-break">{ ticket.reportDateUtc.format('YYYY-MM-DD hh:mm a') }</td>
            <td className="text-right no-break">{ ticket.lastUpdated.format('YYYY-MM-DD hh:mm a') }</td>
            <td className="text-center">{ ticket.problemtype.detailDisplayName }</td>
            <td>
                <OverlayTrigger trigger={ ["hover", "focus"] } placement="bottom"
                                overlay={<Popover id={ "detail-" + ticket.id + "-popover" } title={ ticket.subject }><span dangerouslySetInnerHTML={ helpers.getMarkup(ticket.detail) }/></Popover>}>
                    <div className="detail-wrapper">
                        <strong>{ ticket.subject }</strong>
                    </div>
                </OverlayTrigger>
            </td>
            <td>
                { notes }
            </td>
            <td className="no-break"><a href={ "mailto:" + ticket.clientReporter.email }><i
                className="fa fa-envelope-o"/></a>&nbsp;{ ticket.displayClient }
            </td>
            <td className="text-center">{ ticket.statustype.statusTypeName }</td>
            <td className="text-center no-break">{ ticket.prioritytype.priorityTypeName }</td>
            <td className="no-break"><a href={ "mailto:" + ticket.clientTech.email }><i
                className="fa fa-envelope-o"/></a>&nbsp;{ ticket.clientTech.displayName }
            </td>
        </tr>
    );
}

状态更新的方法（我知道这看起来很糟糕，不幸的是我正在处理一个糟糕的API）：

export function retrieveTickets(scope) {
    tree.set('isLoading', true);
    api.getTickets(scope).then((res) => {
        let tickets = [];
        // Extremely annoying workaround for WHD being terrible
        let count = res.length;
        res.forEach(function (ticket) {
            api.getTicketDetail(ticket.id).then((res) => {
                for (let attr in res) {
                    if (res.hasOwnProperty(attr)) {
                        ticket[attr] = res[attr];
                    }
                }
                ticket.lastUpdated = moment(ticket.lastUpdated).add(4, 'hours');
                ticket.notes = slice(ticket.notes, 0, 2).map(function (note) {
                    note.commenterName = helpers.extractCommenterName(note.prettyUpdatedString);
                    note.strippedText = helpers.stripTags(note.mobileNoteText);
                    return note;
                });
                ticket.reportDateUtc = moment(ticket.reportDateUtc);
                if (ticket.closeDate) {
                    ticket.closeDate = moment(ticket.closeDate).add(4, 'hours');
                }
                if (ticket.displayDueDate) {
                    ticket.displayDueDate = moment(ticket.displayDueDate).add(4, 'hours');
                }
                tickets.push(ticket);

                if (tickets.length === count) {
                    tree.set('tickets', tickets);
                    tree.set('isLoading', false);
                }
            });
        });
    });
}

Answer 1

我认为您的问题是baobab冻结了给定的对象，moment对象在您拨打format时会自行修改。

尝试配置baobab并将immutable设置为false，看看是否能解决问题。

格式化React组件中的时刻对象

1 个答案: