Question

我通过调整给定here的示例实现了即时搜索，我可以通过引用我设置的状态变量来过滤任务。

如何修改订阅中的查询？

目前订阅完成如下：

export default createContainer( () => {
    // Meteor.subscribe( 'Tasks' , '' );
    Meteor.subscribe( 'Tasks' );
    return {
        tasks : Tasks.find({}).fetch(),
    };  
} , App );

并在服务器上

Meteor.publish( 'Tasks' , function tasksPublication() {
    return Tasks.find( {} , { sort : { createdAt : -1 } } );
});

我想这样做：

export default createContainer( () => {
    // if I hardcode searchStr it it works eg 'Task Name'
    Meteor.subscribe( 'Tasks' , searchStr ); 
    return {
        tasks : Tasks.find({}).fetch(),
    };  
} , App );

并在服务器上

Meteor.publish( 'Tasks' , function tasksPublication(query) {
    check(query, String);
    return Tasks.find({
        name : { $regex : query , $options : 'i' }
    }, {
        sort : { createdAt : -1 }
    });
});

我不知道如何从App的状态获得我编程的硬编码值。即使在App中，我也可以使用this.state.searchString访问它。

欢迎任何帮助谢谢

编辑1

imports / ui / App.jsx

中的

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
             searchStr : '' ,
        };
    }

export default createContainer( (props) => {
    console.log(props);
    Meteor.subscribe( 'Tasks' );
    return {
        tasks : Tasks.find({}).fetch(),
    };
}, App );

client / main.jsx

中的

import App from '../imports/ui/App.jsx';

Meteor.startup( () => {
    render( <App searchStr={this.state.searchStr} />, document.getElementById('render-target' ) );
});

我收到以下错误消息：

无法读取未定义的属性'searchStr'

说实话，我认为是有道理的，因为我猜测App的构造函数尚未运行。但问题仍然存在，我该如何解决这个问题？

Answer 1

您可以通过回调参数将道具传递给createContainer。

export default createContainer((props) => {
    Meteor.subscribe('Tasks', props.searchStr); 
    return {
        tasks: Tasks.find({}).fetch(),
    };  
}, SearchResults);

然后将searchStr作为属性传递给您的组件。

import SearchResults from ...

export class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchString: ''
    };
  }

  // ...insert app logic that updates state.searchString.

  render() {
    return <div>
      <input type="text" placeholder="search query" ... />
      <SearchResults searchStr={this.state.searchString} />
    </div>;
  }
}

Bonus protip：

您还可以设置propTypes创建的容器的createContainer：

export default const MyComponent = createContainer((props) => {
  ...
}, SearchResults);

MyComponent.propTypes = {
  searchStr: React.PropTypes.string.isRequired
};

如何修改订阅的搜索查询？

1 个答案: