javascript - react JSX : rendering nested arrays of objects

Question

这个问题已经有答案了:

map function not working in React (3 个回答)

已关闭 6 个月前。

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

  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>
        );
    })
}