React JSX：渲染嵌套的对象数组 [英] React JSX: rendering nested arrays of objects

问题描述

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

  render（） {const {policy} = this.props;让deployment = policy.Deployment; let value = policy.value;让policyLegend = deployment.policyLegend;让policyObj = this.valueToPolicy（policyLegend，value）;执行console.log（政策）;的console.log（部署）;的console.log（值）;的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><复选框切换/>< /Form.Field>）;}）}< / div>}）}<按钮名称= {'提交'} type ='提交'>提交< / Button><按钮onClick = {this.props.onCancel}>取消< / Button>< / Form>< / div>）}  

 < script src =h ttps：//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是一个对象数组，每个对象中都有一个'values'数组。

当我的应用程序构建时，我没有收到任何错误，但我的组件页面上没有任何内容。我不知道我哪里出错了，不胜感激任何建议，谢谢。

解决方案

这是因为你没有在policyLegend地图中返回任何内容。
试试这个：

  {
 policyLegend.map（（policy）=> {
返回（
< div> 
< h3 key = {policy.id}> {policy.displayName}< / h3> 
 {
 policy.values。 map（value => {
 return（
< Form.Field key = {value.name}> 
< label> {value.displayName}< / label> 
<复选框切换/> 
< /Form.Field> 
）; 
}）
} 
< / div> 
）; 
}）
} 
  

I have a component with the following render:

  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 is an array of objects with a 'values' array inside each object.

When my application builds, I receive no errors but nothing appears on my component page. I'm not sure where I'm going wrong and would appreciate any advice, thank you.

解决方案

It's because you do not return anything inside the policyLegend map. Try this:

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

这篇关于React JSX：渲染嵌套的对象数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！