上下文API未显示数据数组

问题描述

我收到错误消息'预期分配了一个函数调用，而是看到了一个表达式。

*上述错误已解决，现在给了我一个未处理的拒绝（TypeError）：render不是一个函数。它可以正常运行，直到我转到产品页面，然后提示我错误。

我在控制台上记录了它，它正在提取信息，但是当我导入ProductBrowse组件以显示信息时，它中断了。

ProductPage：

class ProductPage extends React.Component {
  state = {
    shoppingCartOpen: false,};
  drawerToggleClickHandler = () => {
    this.setState((prevState) => {
      return { shoppingCartOpen: !prevState.shoppingCartOpen };
    });
  };

  render() {
    let shoppingCartDrawer;
    if (this.state.shoppingCartOpen) {
      shoppingCartDrawer = <ShoppingCartDrawer />;
    }
    return (
      <ProductStyling>
        <ButtonAppBar drawerClickHandler={this.drawerToggleClickHandler} />
        <H1>Products</H1>
        {shoppingCartDrawer}
        <ProductConsumer>
          <Grid container spacing={3}>
            {(value) => {
              return value.products.map((prod,idx) => {
                return (
                  <Grid item xs={3} key={`${prod.name}-${prod.store}-${idx}`}>
                    <ProductBrowse
                      productName={prod.name}
                      productDesc={prod.desc}
                      productImg={prod.img}
                      productPrice={prod.price}
                    />
                  </Grid>
                );
              });
            }}
          </Grid>
        </ProductConsumer>
        ;
      </ProductStyling>
    );
  }
}

价值结构：

const ProductContext = React.createContext();

class ProductProvider extends React.Component {
state = {
products: productData,};

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

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

const ProductConsumer = ProductContext.Consumer;

export { ProductProvider,ProductConsumer };

产品浏览：

const ProductBrowse = ({
      productName,productDesc,productImg,productPrice,}) => {
      const classes = useStyles();
      const [open,setOpen] = React.useState(false);
    
      const openModal = () => {
        setOpen(!open);
      };
    
      const closeModal = () => {
        setOpen(!open);
      };
    
      return (
        <Box border={1} borderRadius={3}>
          <Card className={classes.root}>
            <CardActionArea onClick={() => openModal()}>
              <ProductModal
                open={open}
                onClick={() => openModal()}
                onClose={() => closeModal()}
                onSave={() => closeModal()}
                productName={productName}
                productDesc={productDesc}
              />
              <CardHeader
                title={productName}
                subheader={formatCurrency(productPrice)}
              />
              <CardMedia
                className={classes.media}
                image={productImg}
                alt={productDesc}
              />
              <CardContent>
                <Typography variant='body2' color='textSecondary' component='p'>
                  {productDesc}
                </Typography>
              </CardContent>
            </CardActionArea>
            <CardActions>
              <Button size='small' /*To Checkout*/>BUY NOW</Button>
              <Button size='small'>ADD TO CART</Button>
              <Button size='small'>REVIEW</Button>
            </CardActions>
          </Card>
        </Box>
      );
    };

ProductData：

import desk from '../../../assets/img/desk.webp'; 

export const productData = [
    {
      img: desk,name:  'Desk',store: 'Local Furniture Shop 1',price: 9.99,desc: "This sturdy desk is built to outlast years of coffee and hard work. You get a generous work surface and a clever solution to keep cords in place underneath." 
    },

Index.js：

ReactDOM.render(
  <React.StrictMode>
    <Auth0Provider
      domain={auth0Domain}
      client_id={auth0ClientID}
      redirect_uri={window.location.origin}
      onRedirectCallback={onRedirectCallback}
      audience={auth0Audience}
      scope={"read:current_user"}
    >
      <ProductProvider>
      <Provider store={store}>
        <App />
      </Provider>
      </ProductProvider>
    </Auth0Provider>
  </React.StrictMode>,document.getElementById('root')
);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）