无法在 react js 中使用 PubSub.publish 传递数据

IT技术 javascript reactjs react-native
2021-05-24 08:15:31

无法使用 pubsub 组件将数据从 Product 组件传递到 Cartlist 组件。我需要将列表对象传递给 Cart 组件。产品组件呈现产品列表。因此,每个项目都必须作为props传递给 Cart 组件点击。

import React from 'react';
import PubSub from 'pubsub-js';
import Productlist from '../component/productlist';
import Addtocart from '../component/addtocart';

var createReactClass = require('create-react-class');
var Product = createReactClass({
    addtocart:function(data){
        console.log(data);
        PubSub.publish('add-cart','helloworld')
    },

    render:function(){
        var list = this.props.dataname;
        return(
            <div className="card hoverable">
                <div className="card-image">
                    <img src={list.image} alt={list.name} className='shop-img' />
                </div>
                <div className="card-content">
                    <span className="card-title blue-text text-darken-2">{list.price}&nbsp;{list.currency}</span>
                    <p>{list.name}</p>
                </div>
                <Addtocart onClick={() => this.addtocart(list)} />
            </div>
        )
    }

})

export default Product;

购物车列表组件

import React from 'react';
import PubSub from 'pubsub-js';

var createReactClass = require('create-react-class');
var Cartlist = createReactClass({

    componentWillMount:function(data){
     PubSub.subscribe('add-cart',function(data){
          console.log(data);
      });
    },

    // addtocart:function(data){
    //     console.log(data);
    // },

    render:function(){
        var list = this.props.dataname;
        return(
            <div className="card hoverable">
            </div>
        )
    }

})

export default Product;

演示问题的演示链接http://codesandbox.io/s/x7p856zmjp

1个回答

从您的沙箱中,我可以看到问题并在以下工作演示https://codesandbox.io/s/2nv93ro4n 中解决了您的所有问题

  1. 您在 addtocart.js 的某些地方使用了 class 而不是 className
  2. 您将“我的主题”作为订阅,但发布名称不同
  3. 您从未创建过购物车组件。

我将假设 1 和 2 是您创建的演示中的错误,而不是您的原始应用程序中的错误。我相信3是真正的罪魁祸首。如果您从未在任何地方创建组件,则装载事件将永远不会触发,其任何其他代码也不会触发。我已将其添加到您的 app.js(尽管您可以自己决定购物车的业务逻辑和位置)。我想知道您是否应该将addtocart和cart组件合二为一,并将addToCart作为cart的一个功能?