[英]React JSX: rendering nested arrays of objects
我有一個帶有以下渲染的組件:
render() { const { policy } = this.props; let deployment = policy.Deployment; let value = policy.value; let policyLegend = deployment.policyLegend; let policyObj = this.valueToPolicy(policyLegend, value); console.log(policy); console.log(deployment); console.log(value); console.log(policyLegend); console.log(policyObj); return( <div> <Form onSubmit={ (event) => this.handleSubmit(event, this.props) }> { policyLegend.map(function(policy) { <div> <h3 key={ policy.id }>{ policy.displayName }</h3> { policy.values.map(value => { return( <Form.Field key={ value.name }> <label>{ value.displayName }</label> <Checkbox toggle /> </Form.Field> ); }) } </div> }) } <Button name={ 'Submit' } type='submit'>Submit</Button> <Button onClick={ this.props.onCancel }>Cancel</Button> </Form> </div> ) }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
policyLegend是一個對象數組,每個對象內都有一個“值”數組。
構建應用程序時,我沒有收到任何錯誤,但是在組件頁面上什么也沒有顯示。 我不確定我要去哪里錯,請多多指教,謝謝。
這是因為您沒有在policyLegend映射內返回任何內容。 嘗試這個:
{
policyLegend.map((policy) => {
return (
<div>
<h3 key={ policy.id }>{ policy.displayName }</h3>
{
policy.values.map(value => {
return(
<Form.Field key={ value.name }>
<label>{ value.displayName }</label>
<Checkbox toggle />
</Form.Field>
);
})
}
</div>
);
})
}
您不是從map方法返回JSX。 返回JSX后,您形成了:
policyLegend.map(function(policy) {
return (<div>
<h3 key={ policy.id }>{ policy.displayName }</h3>
{
policy.values.map(value => {
return(
<Form.Field key={ value.name }>
<label>{ value.displayName }</label>
<Checkbox toggle />
</Form.Field>
);
})
}
</div>)
})
您應該得到想要的結果
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.