试图将我的数组(props)作为选择器传递给我的发布函数

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了试图将我的数组(props)作为选择器传递给我的发布函数相关的知识,希望对你有一定的参考价值。

import { Mongo } from 'meteor/mongo';
import { Meteor } from 'meteor/meteor';
import React, {Component} from 'react';
import {check} from 'meteor/check';

export const Adressen = new Mongo.Collection('Phonebook');

if (Meteor.isServer) {

    Meteor.publish('ArrayToExport', function(branches) {
        check(branches, [Match.Any]);
        if(branches.length > 10){
            return this.ready()
        };
        return Adressen.find(
            {branche: {$in: branches}}, {fields: {firmenname:1, plz:1}}
        );
    });
}

.

import React, { Component } from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import {Adressen} from "../api/MongoDB";

class ExportArray extends Component{
    constructor(props){
        super(props);

        this.state = {
            branches: this.props.filteredBranches
        };
    }

    render(){

        return(
            <div>
                <button onClick={this.exportArrays}></button>+
            </div>
        );
    }
}
export default withTracker( (branches) => {

    Meteor.subscribe('ArrayToExport', branches);
    return {
        ArrayToExport: Adressen.find({}).fetch()
    };
})(ExportArray);

this.props.filteredBranche是一个纯数组,通过受控输入字段生成。 this.props.filteredBranches在父组件中更改为输入更改。我以为我是通过withTracker函数发送my.props.filteredBranches作为参数。但没有任何内容传递给发布函数。

if (Meteor.isServer) {
    arrayExfct = function (array){
        return {
            find: {branche:{$in: array }},
            fields: {firmenname:1, plz:1}
        };
    }

    Meteor.publish('ArrayToExport', function (array) {
        return Adressen.find(
            arrayExfct(array).find, arrayExfct(array).fields);
    });
}

.

export default withTracker( () => {

    arrayExfct = function(array) {
        return {
            find: {branche: {$in:  array}},
            fields: {firmenname:1, plz:1}
        }
    }

    var array = ['10555'];
    Meteor.subscribe('ArrayToExport', array );
    var arrayExfct = Adressen.find(arrayExfct(array).find, arrayExfct(array).fields);
    return {
        ArrayToExport: Adressen.find({}).fetch()
    };
})(ExportArray);
答案

如果您还添加了使用此组件的位置以及如何将道具传递给它的示例,这将有所帮助,但我认为我看到了您的问题。

您希望渲染组件中的本地状态进入withTracker容器,但这是相反的方式。当您创建withTracker容器时,您实际上正在创建另一个反应组件,该组件呈现您的显示组件(ExportArray)并将数据(ArrayToExport)传递给它。

所以,道具目前是这样的:

外部渲染 - > withTracker组件 - > ExportArray

你需要做什么来从withTracker中的props参数获取过滤的Branches(你从父组件传递?)并将其传递给订阅,

class ExportArray extends Component{

    exportArrays () {
        const { ArrayToExport } = this.props;
    }

    render(){
        const { ArrayToExport } = this.props;
        return(
            <div>
                <button onClick={this.exportArrays}></button>+
            </div>
        );
    }

}

export default withTracker(propsFromParent => {
    const { filteredBranches } = propsFromParent;

    Meteor.subscribe('ArrayToExport', filteredBranches);

    return {
        ArrayToExport: Adressen.find({}).fetch()
    };
})(ExportArray);
另一答案

嗨,问题在于下面的代码。名为branches的参数是props,所以branches.branches是你传入的数组。

    export default withTracker( (branches) => {

    Meteor.subscribe('ArrayToExport', branches);
    return {
        ArrayToExport: Adressen.find({}).fetch()
    };
})(ExportArray);

请尝试以下方法。

    export default withTracker( ({branches}) => {

    Meteor.subscribe('ArrayToExport', branches);
    return {
        ArrayToExport: Adressen.find({}).fetch()
    };
})(ExportArray);

注意所有改变的是

(branches)

成为

({branches})
另一答案

我用Session Variables和State的组合解决了我的问题。

//Client
import React, { Component } from 'react';
import { withTracker } from 'meteor/react-meteor-data';
import {Adressen} from "../api/MongoDB";
import {Meteor} from 'meteor/meteor';
import { Session } from 'meteor/session';

class ExportArray extends Component{
    constructor(){
        super();

        this.state = {
            x: [],
            y: []
        };
        this.exportArrays = this.exportArrays.bind(this);
    }

    exportArrays(e){

        e.preventDefault();
        this.setState({x: this.props.filteredBranches});
        this.setState({y: this.props.filteredPostleitzahlen});
    }

    render(){
        var selector = {branche: {$in: this.state.x},plz: {$in: this.state.y}};

        Session.set('selector', selector);

        return(
            <div>
                <button onClick={this.exportArrays}> Commit </button>
            </div>
        );
    }
}

export default withTracker( () => {

    const ArrayfürExport = Meteor.subscribe('ArrayToExport', Session.get('selector') );
    return {
        ArrayToExport: Adressen.find({}).fetch()
    };
})(ExportArray);

// Server Meteor.publish('ArrayToExport',function(selector){

        console.log('von mongodb', selector);

        return Adressen.find(
            selector
        , {
            fields: {firmenname:1, plz:1}
        });
    });
}

以上是关于试图将我的数组(props)作为选择器传递给我的发布函数的主要内容,如果未能解决你的问题,请参考以下文章

如何将对象(或关联数组)作为属性值传递给我的 Web 组件

如何将mat4数组作为制服传递

使用 Thymeleaf 和 Spring Boot 将我的 HTML 中的整数数组传递给控制器

将我的查询集 obj 作为参数传递时芹菜引发错误

模型数组的 Codeigniter 错误

解决 Vue firebase 后传递 prop