反应js array.map问题

时间:2018-12-07 09:41:25

标签: javascript reactjs

class TicketDetails extends React.Component{
constructor(props){
    super(props)
    this.state ={
        datatra : '',
        display:false,
        action_id:'',
        conversation:[]
       }
}

componentWillMount(){
    this.props.fetchHeader();
    this.props.fetchEmail();
    this.getMessage();
}

getMessage = () =>{
    console.log(this.props.content);
}


componentDidMount () {



 }




onButtonPress = () => {
    console.log(this.state.data);
    this.props.pushUpdateFlag(this.state.data);
}



render(){

    const trailMessage = this.props.content.map((list,index)=>(
        <ul className="listview" key={index}>
             <li>
              <div className="item">{}{list.to}</div>
              <div className="item">{list.sender}</div>
              <div className="item">{list.subject}</div>
              <div className="sub-item">{list.email_body[1]}</div>
              <div className="sub-item">{list.email_data}</div>
              <div className="sub-item">{list.unseen}</div>
            </li>
        </ul>));

    const ticketData = this.props.header.map((list,index)=>(
        <nav key={index} className="ticket-detail-status">
         <div className="ticket-detail-status-1">
         <ul>
             <li>Ticket/# <span><strong>{list.number}</strong></span></li>
             <li>
             <select className="ticket-status-dropdown" onChange={this.onSelectChange}>
                 <option value="Open">Open</option>
                 <option value="Acknowledged">Acknowledged</option>
                 <option value="In Progress - Customer Response Recieved">In Progress - Customer Response Recieved</option>
                 <option value="In Progress - Customer response Awaited">In Progress - Customer response Awaited</option>
                 <option value="Closed">Closed</option>
                 <option value="Cancelled">Cancelled</option>
                 <option value="Complete">Complete</option>
            </select>
            <Link to="/select"><Button  onClick={this.onButtonPress} className={"ticket-detail-btn"} content={"UPDATE"}/></Link>
             </li>
         </ul>
         </div>
         <div className="ticket-detail-status-2">
           <ul className="ticket-details-info">
              <li>current state : <span>open</span></li>
              <li>Open Date : <span>{list.creation_date}</span></li>
              <li>Agent name : <span>{list.agent}</span></li>
           </ul>
           <ul className="ticket-details-info">
            <li>Total conversation : <span>6</span></li>
            <li>Closed Date : <span>10/12/18</span></li>
            <li>SLA : <span>80%</span></li>
           </ul>
         </div>
         </nav>
    ));

      if(this.props.content.length === 0){
        return(<Loader/>)
    }else{
        return(
            <div className="ticket-details">
            {ticketData}
            <div className="conversation-view-selector">
              <div className="conversation-view-filter">
              <ul>
                  <li>view</li>
                  <li>
                      <select className="select-view">
                          <option value="conversation">conversation</option>
                          <option value="state">state</option>
                          <option value="sla">sla</option>
                      </select>
                  </li>
                  <li>sort</li>
                  <li>
                      <select className="select-view">
                          <option value="conversation">select</option>
                          <option value="state">ascending</option>
                          <option value="sla">descending</option>
                      </select>
                  </li>
              </ul>
              </div>
              <div className="conversation-list-populater">
              <div className="conversation-list-populater-open">
              <span className="conversation-list-populater-flags">open</span>
              </div>
               {trailMessage}
                <div className="conversation-list-populater-close">
                <span className="conversation-list-populater-flags">close</span>
                </div>
              </div>
           </div>
           <div className="conversation-view">
           <section className="conversation-view-display">
                  <div className="conversation-view-display-compose">
                      <div className="conversation-view-display-compose-closure">
                          <span><i className="fa fa-times"></i></span>
                      </div>
                      <div className="conversation-view-display-message-form">
                          <form className="conversation-view-display-message-form">
                              <ul>
                                  <li><input type="mail" placeholder="From" name='email'/></li>
                                  <li><input type="mail" placeholder="Date" name='CC'/></li>
                                  <li><input type="mail" placeholder="T0" name='BCC' /></li>
                                  <li><input type="text" placeholder="CC" name='Subject'/></li>
                              </ul>
                              <div className="attachements-counter-placeholder">
                                  Attchements
                              </div>
                              <div className="conversation-view-display-mail-text-area">
                                  {/* <textarea placeholder="Please Pen Here"></textarea> */}
                              </div>
                              <ul className="conversation-view-display-files-men">
                                  <li><i className="fa fa-paperclip"></i></li>
                                  <li><i className="fa fa-link"></i></li>
                              </ul>
                          </form>
                      </div>
                  </div>
              </section>
           </div>
          </div>
)

错误

  

对象作为React子对象无效(找到:带有键的对象   {身体})。如果要渲染子级集合,请使用数组   代替。

我无法理解此错误,因为我之前已使用这种以HTML形式映射多个数组的方法。如果可能的话,有人可以告诉我这个问题吗?

1 个答案:

答案 0 :(得分:1)

您的代码看起来正确,并且您在注释中提到了Exception in thread "main" java.time.format.DateTimeParseException: Text '20091504' could not be parsed: Invalid value for MonthOfYear (valid values 1 - 12): 15 at java.time.format.DateTimeFormatter.createError(Unknown Source) at java.time.format.DateTimeFormatter.parse(Unknown Source) at java.time.LocalDate.parse(Unknown Source) at com.katte.infa.DateFormatDemo.main(DateFormatDemo.java:22) Caused by: java.time.DateTimeException: Invalid value for MonthOfYear (valid values 1 - 12): 15 at java.time.temporal.ValueRange.checkValidIntValue(Unknown Source) at java.time.temporal.ChronoField.checkValidIntValue(Unknown Source) at java.time.chrono.IsoChronology.resolveYMD(Unknown Source) at java.time.chrono.IsoChronology.resolveYMD(Unknown Source) at java.time.chrono.AbstractChronology.resolveDate(Unknown Source) at java.time.chrono.IsoChronology.resolveDate(Unknown Source) at java.time.chrono.IsoChronology.resolveDate(Unknown Source) at java.time.format.Parsed.resolveDateFields(Unknown Source) at java.time.format.Parsed.resolveFields(Unknown Source) at java.time.format.Parsed.resolve(Unknown Source) at java.time.format.DateTimeParseContext.toResolved(Unknown Source) at java.time.format.DateTimeFormatter.parseResolved0(Unknown Source) ... 3 more 行中的错误。

您可以通过确保email_body是一个数组并在其中包含元素来解决该问题

您可以更改

email_body

收件人

  <div className="sub-item">{list.email_body[1]}</div>

它将解决问题