React - 必须返回有效的 React 元素(或 null) [英] React - A valid React element (or null) must be returned

查看：99
本文介绍了React - 必须返回有效的 React 元素(或 null)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下 React 组件:

import React, {Component} from 'react';从'jquery'导入$；从redux"导入{bindActionCreators}；从'react-redux'导入{connect}；类 SamplesInnerLrg 扩展组件 {playSample(参考名称，事件){var idClicked = this.refs[refName];var linkAudio = $(idClicked).children("#myAudio")[0];linkAudio.play();}使成为() {返回 this.props.samples.map((sample) => {返回 (<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 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"/>

<div className="sample-comp-lge-owner">{sample.uploader}</div>

)})}}函数 mapStateToProps(state) {返回 {样本:state.samples};}导出默认连接(mapStateToProps)(SamplesInnerLrg)；

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

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

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

解决方案

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

试试这个:

 返回 
{this.props.samples.map((sample) => {返回 (<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 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"/>

<div className="sample-comp-lge-owner">{sample.uploader}</div>

)})}

通过这样做，您将节点数组包装在

节点下.

I have the following React component:

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

The issue here is i'm getting the error "A valid React element (or null) must be returned ". After looking at a few similar issues on here it looks like the usual issue is not wrapping the JSX in a parent non parallel element. In my code above it is wrapped with the parent so not sure why I am getting the error.

Worth mentioning the error says the problematic component is Invariant Violation: SamplesInnerLrg.render()

New to React so appreciate all the help I can get

解决方案

React should return a single HTML node. In your case, you're returning an array of nodes.

Try this:

 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>

By doing this, you're wrapping the array of nodes under a <div> node.

这篇关于React - 必须返回有效的 React 元素(或 null)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆