Render 不是功能电商 React 组件答案

【问题标题】：Render is not a function e-commerce React componentRender 不是功能电商 React 组件
【发布时间】：2022-01-06 03:20:10
【问题描述】：

我在我的 Cart.js 文件中使用了类组件，但它得到了“渲染不是函数”的错误。我也尝试将其更改为功能组件，但它也不起作用，请帮助我找到修复它的方法！非常感谢！

我的沙盒链接：https://codesandbox.io/s/why-cant-i-fetch-data-from-a-passed-value-forked-buz0u?file=/src/App.js

【问题讨论】：

标签： reactjs render

【解决方案1】：

Cart 组件有错误，因为您以不正确的方式使用来自ProductContext 的Consumer。改一下这段代码就可以解决问题了：

import React from "react";
const ProductContext = React.createContext();

export default class Cart extends React.Component {
  render() {
    return (
      <div>
        <ProductContext.Consumer>
          {(value) => {
            return <div>hello</div>
          }}
        </ProductContext.Consumer>
      </div>
    );
  }
}

【讨论】：

为什么它需要一个值？
@naha 查看文档：reactjs.org/docs/context.html#contextconsumer
对不起，当我尝试将值设置为购物车解构时，我再次遇到错误。如果你不介意的话，你能帮帮我吗？链接：codesandbox.io/s/…
@naha 你不需要定义const {cart} = value。你只需要使用{value}!
@naha 我的回答有帮助吗？

【解决方案2】：

请更改您的购物车组件

import React from "react";
const ProductContext = React.createContext();

export default class Cart extends React.Component {
  render() {
    return (
      <div>
        <ProductContext.Provider value={null}>
          hello
        </ProductContext.Provider>
      </div>
    );
  }
}

【讨论】：

非常感谢！但是，当我尝试将值设置为购物车解构时，我再次遇到错误。如果你不介意，你能帮我吗？链接：codesandbox.io/s/…
请传递值参数，如
什么意思？