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

Posted 2021-05-06

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}
        });
    });
}