我有一个带有以下渲染的组件:
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> ); }) }