react js array.map issue

Question

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子对象无效(已找到：带键的对象｛body｝(。如果要渲染子对象的集合，请使用数组相反

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

Answer 1

您的代码看起来是正确的，正如您在注释中提到的email_body行中的错误。

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

您可以更改

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

至

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

它将解决问题