Question

我使用react-komposer软件包在Meteor上构建应用程序。它非常简单：包含搜索表单和结果列表的顶级组件（ App ）。该列表通过komposer容器（ AppContainer ）提供的props获取其条目。它非常有效，直到我尝试实现搜索，缩小列表中显示的结果。

这是我开始使用的代码（ AppContainer .jsx）：

import { Meteor } from 'meteor/meteor';
import { composeWithTracker } from 'react-komposer';
import React, { Component } from 'react';
import Entries from '../api/entries.js';
import App from '../ui/App.jsx';

function composer(props, onData) {
  if (Meteor.subscribe('entries').ready()) {
    const entries = Entries.find({}).fetch();
    onData(null, {entries});
  };
};

export default composeWithTracker(composer)(App);

App 只是呈现整个条目列表。我想要实现的是将查询参数传递给Entries.find({}).fetch();，其中来自 App 组件的数据（例如通过文本输入捕获）。换句话说：如何从 App （子）组件中将参数提供到 AppContainer 中，以便搜索特定条目并最终重新呈现相应的结果？

为了进一步说明，这里是App.jsx的代码：

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        <form>
          <input type="text" placeholder="Search" />
        </form>
        <ul>
          {this.props.entries.map((entry) => (
            <li key={entry._id}>{entry.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

提前致谢！

Answer 1

我打算为此写一篇评论来澄清nupac的答案，但字符数量过于严格。

您正在寻找的示例代码位于nupac提供的搜索教程链接中。这是具有相应更改的作曲家函数：

function composer(props, onData) {
  if (Meteor.subscribe('entries', Session.get("searchValues")).ready()) {
    const entries = Entries.find({}).fetch();
    onData(null, {entries});
  };
};

解决方案是session包。您可能需要将其添加到您的包文件中，它应该可用而无需导入它。否则请尝试使用import { Session } from 'meteor/session'; 您只需在提交搜索表单时设置会话即可。比如这样：

Session.set("searchValues", {
      key: value
});

每次特定会话值更改时，订阅都会自动获取数据。

最后，您将能够访问服务器端的publish方法中的值：

Meteor.publish('entries', (query) => {
  if (query) {
    return Entries.find(query);
  } else {
    return Entries.find();
  }
});

希望这会有所帮助。如果情况并非如此，请告诉我。

Answer 2

您可以采取两种方法。

订阅方式，
Meteor.call方式，

订阅方式

它涉及您设置从网址获取的属性。因此，您设置路由以向您发送查询属性。您的组件使用该属性作为参数发送到您的出版物，并仅订阅符合搜索条件的内容。然后将查询放在fetch语句中并呈现结果。

Meteor.call方式

忘记订阅并按旧方式执行。将查询发送到端点，在本例中为Meteor方法，并呈现结果。我更喜欢这种方法，原因有一个，$text。 Minimongo不支持 $ text ，因此您无法使用 $ text 来搜索客户端上的内容。相反，您可以使用文本索引和meteor方法设置服务器的mongo来处理搜索并呈现结果。

了解适合您的优先事项。 meteor.call方式要求您做更多的工作，使“搜索结果”可以通过URL共享，但您可以获得更丰富的搜索结果。订阅方式更容易实现。

以下是search tutorial for meteor的链接，如果您有兴趣，请阅读$text

如何从子组件更改react-komposer（meteor）中的订阅查询参数？

2 个答案:

订阅方式

Meteor.call方式