Meteor数据不更新？React Native中是否需用Tracker Autorun解决字段刷新问题

嘿，这个问题我遇到过类似的情况，咱们来一步步解决它！首先明确回答你：是的，你可以用Tracker Autorun，不过先看看你的代码里的核心问题在哪里，这样能更高效地解决问题。

问题根源 #

你的createContainer返回的selectedDeputy依赖于Meteor.user().profile.selectedDeputy，但当前写法没有让Tracker正确追踪到这个值的变化。当用户切换议员时，Meteor.user().profile.selectedDeputy更新了，但createContainer没有重新执行查询，导致selectedDeputy还是旧数据，自然depute.nom和depute.groupe_sigle不会更新。

解决方案1：优化createContainer（推荐） #

这是最符合Meteor+React开发规范的方式，让createContainer正确追踪依赖变化：

class Info extends Component { 
  render() { 
    const {nom, groupe_sigle, nom_circo, picture, num_circo, id} = this.props.navigation.state.params; 
    const { selectedDeputy, selectedDeputyId } = this.props;
    const depute = selectedDeputy?.depute;

    if (!depute) return <Text>Loading deputy info...</Text>;

    return ( 
      <View> 
        <Text>Your deputy is : {depute.nom}</Text> 
        <Text>Your deputy group is : {depute.groupe_sigle} </Text> 
        <Text>The deputy Id gets updated : {selectedDeputyId} </Text> 
      </View> 
    ) 
  } 
} 

export default createContainer(params=>{
  // 先获取用户对象，让Tracker追踪其变化
  const user = Meteor.user();
  const selectedDeputyId = user?.profile?.selectedDeputy;

  // 订阅数据，确保拿到最新的议员信息
  const subscription = Meteor.subscribe('selectedDeputy');

  return{ 
    isReady: subscription.ready(),
    selectedDeputyId: selectedDeputyId,
    selectedDeputy: selectedDeputyId ? Meteor.collection('deputies').findOne(selectedDeputyId) : null, 
  }; 
}, Info);

解释：

• 先单独提取user和selectedDeputyId，这样Tracker会自动监听Meteor.user()的变化
• 当selectedDeputyId更新时，findOne会重新执行查询，返回新的议员数据
• 增加了加载状态提示，提升用户体验

解决方案2：使用Tracker Autorun #

如果你需要更灵活的控制，可以在组件内部用Tracker.autorun手动监听变化：

class Info extends Component { 
  state = { depute: null };

  componentDidMount() {
    // 启动autorun，监听依赖变化
    this.deputyAutorun = Tracker.autorun(() => {
      const selectedDeputyId = Meteor.user()?.profile?.selectedDeputy;
      // 查询最新的议员数据
      const deputyData = selectedDeputyId ? Meteor.collection('deputies').findOne(selectedDeputyId) : null;
      this.setState({ depute: deputyData?.depute });
    });
  }

  componentWillUnmount() {
    // 组件卸载时停止autorun，避免内存泄漏
    this.deputyAutorun?.stop();
  }

  render() { 
    const {nom, groupe_sigle, nom_circo, picture, num_circo, id} = this.props.navigation.state.params; 
    const number= Meteor.user().profile.selectedDeputy; 
    const { depute } = this.state;

    if (!depute) return <Text>Loading deputy info...</Text>;

    return ( 
      <View> 
        <Text>Your deputy is : {depute.nom}</Text> 
        <Text>Your deputy group is : {depute.groupe_sigle} </Text> 
        <Text>The deputy Id gets updated : {number} </Text> 
      </View> 
    ) 
  } 
} 

export default createContainer(params=>{
  Meteor.subscribe('selectedDeputy');
  return{}; 
}, Info);

解释：

• Tracker.autorun会自动监听内部用到的Reactive数据源（比如Meteor.user()和deputies集合）
• 当依赖变化时，会自动执行回调函数，更新组件状态
• 一定要在componentWillUnmount里停止autorun，防止内存泄漏

总结 #

两种方法都能解决你的问题，优先推荐第一种优化createContainer的方式，它更贴合Meteor的React集成模式，代码也更简洁。如果需要自定义监听逻辑，再考虑第二种Tracker.autorun的方案。

内容的提问来源于stack exchange，提问作者Sonia