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

Question

我不知道为什么我的 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));

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

Answer 1

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

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