无法在 react js 中使用 PubSub.publish 传递数据 [英] Cannot pass data using PubSub.publish in react js

问题描述

无法使用 pubsub 组件将数据从 Product 组件传递到 Cartlist 组件.我需要将列表对象传递给 Cart 组件.产品组件呈现产品列表.因此，每个项目都必须作为道具传递给单击时的购物车组件.

从'react'导入React；从 'pubsub-js' 导入 PubSub；从'../component/productlist'导入产品列表；从'../component/addtocart'导入Addtocart；var createReactClass = require('create-react-class');var Product = createReactClass({添加到购物车:功能(数据){控制台日志(数据)；PubSub.publish('添加购物车','helloworld')},渲染:函数(){var list = this.props.dataname;返回(<div className="卡片可悬停"><div className="card-image"><img src={list.image} alt={list.name} className='shop-img'/>

<div className="卡片内容"><span className="card-title blue-text text-darken-2">{list.price}&nbsp;{list.currency}</span><p>{list.name}</p>

<Addtocart onClick={() =>this.addtocart(list)}/>

)}})导出默认产品；

购物车列表组件

从'react'导入React；从 'pubsub-js' 导入 PubSub；var createReactClass = require('create-react-class');var Cartlist = createReactClass({组件WillMount:功能(数据){PubSub.subscribe('添加购物车',function(data){控制台日志(数据)；});},//添加到购物车:功能(数据){//console.log(data);//},渲染:函数(){var list = this.props.dataname;返回(<div className="卡片可悬停">

)}})导出默认产品；

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

解决方案

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

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

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

Cannot pass data using the pubsub component from the Product component to Cartlist component.i need to pass the list object to the Cart component.The product component renders a list of products.So each item has to be passed as props to the Cart Component when clicked.

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;

Cartlist Component

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;

Demo link demonstrating the issue http://codesandbox.io/s/x7p856zmjp

解决方案

From your sandbox, I can see the problem and have fixed all your issues in the following working demo https://codesandbox.io/s/2nv93ro4n

1. You had used class instead of className in some places in addtocart.js
2. You had 'MY TOPIC' as the subscription, but a different publish name
3. You were never creating the cart component.

I'm going to assume 1 and 2 were mistakes made in the demo you created, not in your original application. I believe 3 is the true culprit. If you never create a component anywhere, the mount events will never fire nor will any of its other code. I have added it to your app.js (though you can decide the business logic and location of the cart yourself). I wonder if you should combine the addtocart and cart components into one, and have addToCart as a function of the cart?

这篇关于无法在 react js 中使用 PubSub.publish 传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！