2015-11-25 20 views
1

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

{ 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); 
       } 
      }); 
     }); 
    }); 
} 
+0

這是'{ticket.reportDateUtc.format('YYYY-MM-DD hh:mm a')}'你在JSX中調用什麼來顯示日期? – Mayas

+0

是的,其中'ticket.reportDateUtc'是時刻對象。 – NeuroXc

+0

然後只要確保'ticket.reportDateUtc.format('YYYY-MM-DD hh:mm a')'是一個字符串。 – Mayas

回答

1

我相信你的問題是:baobab凍結給它的對象,並moment對象修改自己,當你調用format

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

+0

就是這樣。我應該早一點懷疑過,但是這個錯誤消息給了我很少的指示。謝謝您的幫助! – NeuroXc