代码之家 › 专栏 › 技术社区 › Mahdi

在react中映射数组时出错

reactjs javascript

Mahdi · 技术社区 · 6 年前

我在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子对象无效(找到:具有键{bar}的对象)。如果要呈现子集合,请改用数组。

请帮帮我

1 回复 | 直到 6 年前

Joshua Fermin 6 年前

您的问题是react组件应该只返回null或jsx。

你应该可以通过以下方式得到你想要的:

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前