渲染方法没有返回有效的 React 元素

Posted 2023-03-10

【中文标题】渲染方法没有返回有效的 React 元素

【英文标题】：Valid React element not being returned from render method

【发布时间】：2017-04-08 10:33:30

【问题描述】：

我不知道为什么我的 React 组件没有正确渲染。在我看来一切都很好。也许其他人可以指出我错过的东西。

import React, Component from 'react';

class Voting extends Component 

    renderButton(item) 
        return (
            <button type='button' className='btn btn-primary'>
                item
            </button>
        )
    

    render() 
        return this.props.pair.map(item => 
            return(
                <div>
                    this.renderButton(item)
                </div>
            )
        );
    


export default Voting;

这是错误

bundle.js:9044 未捕获的错误：Voting.render()：有效的 React 元素 （或 null）必须返回。你可能返回了一个未定义的数组 或其他一些无效对象。(…)

当我从我的 render() 方法返回一个带有 Hello World 的简单 div 时，它返回正常并显示出来。我记录了从函数调用到 renderButton 方法的返回，如下所示：

console.log(this.renderButton(item));

我得到一个有道具的对象。虽然我不确定应该返回一个对象？

【参考方案1】：

你需要将你的返回值包裹在一个div中，组件应该只返回一个元素。

 render()              
            return (
                <div>
                     this.props.pair.map(item => this.renderButton(item)) 
                </div>
            )            
    

【讨论】：

是的，我也是自己想出来的。谢谢！此外，您需要在 this.renderButton(item)

前面添加一个 return 语句

是的，或者只是删除 ，在一行中您不需要返回。我忘了那部分=）