如何修改訂閱的搜索查詢？

Question

我已經通過調整此處給出的示例實現了即時搜索，在該示例中，我可以通過引用設置的狀態變量來過濾任務。

但是，如何通過修改訂閱中的查詢來執行此操作？

當前的訂閱操作如下：

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

在import / 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>;
  }
}

---

獎金提示：

您還可以設置由createContainer創建的容器的propTypes ：

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

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