Question

出于某种原因，我的React组件显示此错误：

Warning: ReactComponent(...): No `render` method found on the returned component instance: you may have forgotten to define 'render'.

即使我在我的组件中定义了render：

import React, { Component } from 'react';
import {addCart} from './Shop'; 
import { connect } from 'react-redux';


export class Cart extends Component {
    render() {
        console.log('cart', this.props.cart);
        return(
            <div className= "Webcart" id="Webcart">
                <Component cartItem={this.props.cartItem} />
            </div>
        );
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        onCartAdd: (cart) => {
            dispatch(addCart(cart));
        },
    }
}

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

export default connect(mapStateToProps, mapDispatchToProps)(Cart);

我的组件导致此错误有什么问题？

Answer 1

这一行就在这里：

<Component cartItem={this.props.cartItem} />

此处Component指的是您在错误消息中看到的React.Component或ReactComponent没有实现render方法，它是{只是组件的超类。您尝试创建Component的元素，但没有render方法且毫无意义。

您可能使用了错误的组件，忘记导入并使用正确的组件。

如何在我的代码中修复在返回的组件实例上找到的'`render`方法错误？

1 个答案: