React - 必须返回一个有效的 React 元素（或 null）

Question

我有以下 React 组件：

import React, {Component} from 'react';
import $ from 'jquery';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

class SamplesInnerLrg extends Component {  
    playSample (refName,event) {
        var idClicked = this.refs[refName];
        var linkAudio = $(idClicked).children("#myAudio")[0];
        linkAudio.play();
    }
    render() {
        return this.props.samples.map((sample) => {
        return (
                <div key={sample.id} className="sample-comp-lge">
                    <div className="sample-comp-lge-header">
                        <span className="sample-comp-lge-Name">{sample.sampleName}</span>
                        <span className="sample-comp-lge-id">{sample.sampleFamily}</span>
                    </div>
                    <div className="sample-comp-lge-audio" ref={sample.id} onClick={this.playSample.bind(this,sample.id)}>
                        <audio preload="auto" id="myAudio">
                              <source src={sample.soundSource} type="audio/wav" />
                        </audio>
                    </div>
                    <div className="sample-comp-lge-owner">{sample.uploader}</div>
                </div>
            )
        })
    }
}

function mapStateToProps(state) {
    return {
        samples:state.samples
    };
} 

export default connect(mapStateToProps)(SamplesInnerLrg);

这里的问题是我收到错误“必须返回有效的 React 元素（或 null）”。在查看了一些类似的问题之后，看起来通常的问题是没有将 JSX 包装在父非并行元素中。在我上面的代码中，它与父级包装在一起，所以不确定我为什么会收到错误。

值得一提的错误是有问题的组件是 Invariant Violation: SamplesInnerLrg.render()

React 新手，感谢我能得到的所有帮助

Answer 1

React 应该返回一个 HTML 节点。在您的情况下，您将返回一个节点数组。

试试这个：

 return <div>
   {
     this.props.samples.map((sample) => {
        return (
                <div key={sample.id} className="sample-comp-lge">
                    <div className="sample-comp-lge-header">
                        <span className="sample-comp-lge-Name">{sample.sampleName}</span>
                        <span className="sample-comp-lge-id">{sample.sampleFamily}</span>
                    </div>
                    <div className="sample-comp-lge-audio" ref={sample.id} onClick={this.playSample.bind(this,sample.id)}>
                        <audio preload="auto" id="myAudio">
                              <source src={sample.soundSource} type="audio/wav" />
                        </audio>
                    </div>
                    <div className="sample-comp-lge-owner">{sample.uploader}</div>
                </div>
            )
        })
     }
   </div>

通过这样做，您将节点数组包装在 <div> 节点下。