Question

我在React中映射数组时遇到问题，问题是：这是我父元素的状态：

this.state = {
  grouping: 3,
  bars: [{
    snare: Array(16).fill('0'),
    hihat: Array(16).fill('0'),
    kick: Array(16).fill('0'),
  }]
}

我想将条形图传递给子元素：

<Bar bar={this.state.bars}>

在'Bar'课程中我写了这段代码：

class Bar extends Component {
    render(){
        const Bars = this.props.bars.map((bar)=>{
            return('something')
        }
        return({Bars})
    }
}

在此代码之后，我发生了这个错误：

对象作为React子对象无效（找到：具有键{Bars}的对象）。如果您要渲染子集合，请改用数组。

请帮助我

Answer 1

您的问题是React组件应该只返回null或JSX。

通过执行以下操作，您应该能够获得所需内容：

<div class="app-form container-fluid">
    <div class="row">
        <div class="col-6">
            <div class="button-left float-left">
                <button (click)="onPrevious('tab-empinfo')">Previous</button>
            </div>
        </div>
        <div class="col-6">
            <div class="button-right float-right">
                <button 
                (click)="onNext('tab-selection', {
                         form: 'category', 
                         data: {category: formCategory.value['Category1']}})">
                Next
                </button>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h4>Category</h4>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <form #formCategory="ngForm">
                <div class="form-group" *ngFor="let input of categorySelection; let i = index">
                    <choice *ngIf="input.type == 'choice'" name="Category{{ i + 1 }}" ngModel
                            [multiple]="input.multiple" [question]="input.question" [answers]="input.answers"></choice>
                </div>
            </form>
        </div>
    </div>
</div>
<pre>
    {{ formCategory.value | json }}
</pre>

在React中映射数组时出错

1 个答案: