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

Question

I have a search bar that is in its own component (so that it is in the navbar) and it uses Session.set to create a variable I use in another component as the search term:

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

This successfully creates a search term as it is entered. The problem is that when I try to use the 'searchTerm' variable in the listing component to list my collections.

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

The ticket list component should be showing all tickets until something is entered into the search bar (that part is working). After the search bar is used, ideally the searchTerm will filter any tickets that match the 'talent' or 'city' fields of the collection.

Answer 1

Assuming there is no typo or logic bug in your code, my first recommendation is to use createContainer

instead of tracker.autorun. Move your code from tracker.autorun to createContainer function and pass searchTerm as a prop to TicketList. Also move setState code to componentWillReceiveProps method. This is from my personal experience with similar issue and also see https://github.com/meteor/react-packages/issues/99 .