javascript - 在 React 中映射数组时出错

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。

您应该能够通过执行以下操作来获得您想要的内容:

class Bar extends Component {
    render(){
        return(
            {
                this.props.bars.map((bar)=>{
                    return <div>{bar}<div/>
                })
            }
        )
    }
}