React JSX：渲染对象的嵌套数组

Question

我有一个带有以下渲染的组件：

  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是一个对象数组，每个对象内都有一个“值”数组。

构建应用程序时，我没有收到任何错误，但是在组件页面上没有任何显示。我不确定我要去哪里错，请多多指教，谢谢。

Answer 1

这是因为您没有在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>
        );
    })
}