Question

我有一个搜索栏，它位于自己的组件中（因此它在导航栏中），它使用Session.set创建我在另一个组件中使用的变量作为搜索词：

updateSearch(e){


Session.set('searchTerm', e.target.value);
  console.log(Session.get('searchTerm'));
}

render(){
  return(
    <div>
      <form>
          <div className="form-group">
              <input type="text" className="form-control" placeholder="Search Tickets"
              // value={this.state.search}
              onChange={this.updateSearch.bind(this)}/>
          </div>
      </form>
    </div>
  )
}
}

这会在输入时成功创建搜索词。问题是当我尝试使用列表组件中的'searchTerm'变量来列出我的集合时。

import { Tickets } from '../../../imports/collections/tickets';
import TicketSearch from './TicketSearch';

export default class TicketList extends React.Component {
  constructor (props) {
      super(props);
      this.state = {
        tickets: [],
        searchTerm: ''
      };
    }

    componentDidMount() {
      this.ticketTracker = Tracker.autorun(() => {
        Meteor.subscribe('tickets');
        let searchTerm = Session.get('searchTerm');
           if (searchTerm) {

                  let tickets = Tickets.find({$in: { talent: searchTerm}}).fetch()
                  this.setState({ tickets });
                }
                 else {

          let tickets = Tickets.find({}).fetch();
          this.setState({ tickets });
         }
      });
    }

    componentWillUnmount() {
      console.log('componentWillUnmount TicketList');
      this.ticketTracker.stop();
    }

    renderTicketList() {
        if (!this.state.tickets.length) {
          return (
            <div>
              <p>No Tickets Found</p>
            </div>
          )
        }

      return this.state.tickets.map((ticket) => {

     return (
             <div>
                    {ticket.talent}
                    {ticket.city}      
              </div>
              )

  render() {
    return(
      <div>
          {this.renderTicketList()}
      </div>
    );
  }
};

故障单列表组件应显示所有故障单，直到将某些内容输入搜索栏（该部分正在运行）。使用搜索栏后，理想情况下，searchTerm将过滤与该集合的“talent”或“city”字段匹配的所有票证。

Answer 1

假设您的代码中没有拼写错误或逻辑错误，我的第一个建议是使用createContainer

而不是tracker.autorun。将您的代码从tracker.autorun移动到createContainer函数，并将searchTerm作为propTlem传递给TicketList。还将setState代码移动到componentWillReceiveProps方法。这是我个人对类似问题的经验，也见https://github.com/meteor/react-packages/issues/99。

使用Session变量从反应流星搜索栏查询mongo集合

1 个答案: