Reactjs 在React组件中设置力矩对象的格式

我有一组日期/时间字符串，我正试图将其存储为React应用程序状态树中的

moment

对象。然后，我尝试在我的组件中显示这些格式化的对象，如下所示：

{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

但是，如果将

时刻

保存到状态时将其格式化为字符串，然后在组件中显示该字符串，它将成功显示（但我不希望这样做，以便可以使用不同的格式选项重用对象）。这似乎表明我使用了正确的语法（他们的示例完全相同，但使用的是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>
    );
}

---

我相信你的问题是，

baobab

冻结给它的对象，而

moment

对象在你调用

格式时会自我修改

尝试配置猴面包树并将
immutable
设置为false，看看这是否解决了问题。
这是
{ticket.reportDateUtc.format（'YYYY-MM-DD hh:MM a'）}
您在JSX中调用什么来显示日期？是的，其中
ticket.reportDateUtc
是矩对象。然后确保
ticket.reportDateUtc.format（'YYYY-MM-DD hh:MM a'）
是一个字符串。它是。如果我执行
console.log（typeof ticket.reportDateUtc.format（'YYYY-MM-DD hh:MM a'）；
则控制台输出“string”。但是这揭示了一个新的奇怪行为。如果我添加
console.log（typeof ticket.reportDateUtc.format（'YYYY-MM-DD hh:MM a'））；
在我更新状态的方法中，我的视图现在可以工作了。但是如果我从状态控制器中删除该行并将其添加到组件渲染方法的顶部，它将返回到不使用相同的“不可扩展”的状态消息。您可以显示一些渲染方法吗？以及更新状态的方法吗？也是
ticket
普通对象吗？
reportDateUtc
是该对象上的一个简单属性，还是一个属性访问器？就是这样。我早就该怀疑了，但错误消息没有给出多少方向。感谢您的帮助救命啊！
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);
                }
            });
        });
    });
}