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

【问题标题】：React JSX: rendering nested arrays of objectsReact JSX：渲染嵌套的对象数组
【发布时间】：2017-11-29 17:57:47
【问题描述】：

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

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

当我的应用程序构建时，我没有收到任何错误，但我的组件页面上没有任何内容。我不确定我要去哪里错了，希望有任何建议，谢谢。

【问题讨论】：

标签： javascript arrays reactjs nested nested-loops

【解决方案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>
        );
    })
}

【讨论】：

【解决方案2】：

您没有从 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>)
            })

你应该得到你正在寻找的结果

【讨论】：

嗨，我为什么不能return policyLegend.map(.... => (...) )？那回报会做什么？