在React組件中格式化矩形對象

Question

我有一組日期/時間字符串，我試圖在狀態樹中爲我的React應用程序存儲moment對象。然後我想顯示這些對象，格式化的，在我的組件，像這樣：

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

這將導致以下錯誤，當我嘗試在我作出反應的應用程序來查看這個組件：

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。

嘗試配置猴麪包樹並將immutable設置爲false，看看是否解決了問題。