时间戳

首页 > 解决方案 > 如何解决 react js 给出的错误，例如 TypeError: render is not a function？

reactjs - 如何解决 react js 给出的错误，例如 TypeError: render is not a function？

问题描述

这是我的代码：

import React, { Component } from 'react'
import { storeProducts, detailProduct } from './data';

const ProductContext = React.createContext(null);
//Provider
//Consumer


class ProductProvider extends Component {
    state = {
        products: storeProducts,
        detailProduct: detailProduct
    }

    handleDetail = () =>{
        console.log('hello from details');

    }

    addToCart = () => {
        console.log('hello from add to cart');

    }

    render() {
        return (
            <ProductContext.Provider  value={{
                    ...this.state,
                }}>
            {this.props.children}
            </ProductContext.Provider>
        )
    }
}

const ProductConsumer = ProductContext.Consumer;

export { ProductProvider, ProductConsumer };

错误

在此处输入图像描述

我怎样才能解决这个问题？

标签： reactjs

解决方案

@Anshu，我认为错误来自消费者。在 的正下方TypeError: render is not a function，我们可以看到updateContextConsumer方法。

编辑：所以，我想我想通了。它确实与消费者有关。在你使用 的地方<ProductConsumer/>，你需要使用一个函数作为他的孩子。就像是：

<ProductConsumer>
  { state => (<div>{ JSON.stringify( state ) }</div>) }
</ProductConsumer>

如果您想更好地理解它，我将代码放在我的 GitHub 上。 https://github.com/wagnermeyer/stackoverflow-issue-57788587

推荐阅读