React Native组件重渲染时内部Firestore异步查询不重新执行问题

你观察到的“组件顶层日志随props正常更新打印、但内部异步逻辑只在首次渲染执行”的现象，本质是React不同代码块的执行规则差异导致的：

• 写在组件函数体里的顶层console.log，会在每次组件重新渲染（即父组件传入新props时）都执行，所以能正常打印最新的props值
• 你用来写异步查询的useEffect传入了空依赖数组[]，按照React Hooks的运行规则，该副作用只会在组件首次挂载时执行1次，后续即使props.typeOfPost发生变化，副作用也不会重新触发，自然不会执行里面的异步查询逻辑
• 你在getData内部定义的取消订阅返回值，并没有被useEffect捕获管理，即使后续重新触发查询，旧的Firestore实时监听也不会被主动注销，长期运行会出现内存泄漏、新旧集合数据串流的问题

按照以下逻辑调整即可实现集合的动态切换：

• 给useEffect 添加props.typeOfPost作为依赖项，当这个props变化时，自动先清理上一轮的副作用，再执行新的查询逻辑
• 将Firestore的取消订阅逻辑作为useEffect的返回值，由React直接管理生命周期，确保组件卸载、依赖值变化时能正确断开旧的监听
• 每次切换查询集合时，手动将loading状态重置为true，避免用户在新数据加载完成前看到上一个集合的残留数据
• 初始化时给typeOfPost设置合法的默认集合值，避免首次渲染时查询空路径触发Firestore报错

调整后的完整可运行代码如下：

// 父组件部分：修正typeOfPost初始值，避免首次查询空路径报错
class Forum extends Component {
 state = {
    typeOfPost: 'sitterPosts'
 }
 onPressSitter = () => {
    this.setState({ typeOfPost: 'sitterPosts' })
 }
 onPressNeedSitter = () => {
    this.setState({ typeOfPost: 'needPosts' })
 }
 render() {
    return (
      <View style={styles.container}>
        <View style={styles.row}>
            <TouchableOpacity 
              style={styles.button} 
              onPress={this.onPressSitter}
            >
              <Text>I am a sitter</Text>
            </TouchableOpacity>
            <TouchableOpacity 
              style={styles.button} 
              onPress={this.onPressNeedSitter}
            >
              <Text>Need a sitter</Text>
            </TouchableOpacity>
        </View>
        <View>
          <Component1 typeOfPost={this.state.typeOfPost} />
        </View>
      </View>
    )
  }
}

const Component1 = (props) => {
  console.log("接收到的最新typeOfPost值：", props.typeOfPost);
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    // 新查询触发时先重置加载状态
    setLoading(true);
    console.log("触发异步查询，当前查询集合为：", props.typeOfPost);

    // 建立Firestore实时监听
    const subscriber = firestore()
      .collection(props.typeOfPost)
      .onSnapshot(querySnapshot => {
        const postList = [];
        querySnapshot.forEach(documentSnapshot => {
          postList.push({
            ...documentSnapshot.data(),
            key: documentSnapshot.id,
          });
        });
        // 更新列表数据、关闭加载态
        setData(postList);
        setLoading(false);
      });

    // 把取消订阅函数作为副作用的返回值，React会在依赖变化/组件卸载时自动执行清理
    return () => subscriber();
    // 将props.typeOfPost加入依赖数组，值变化时自动重新执行查询逻辑
  }, [props.typeOfPost]);

  if (loading) {
    return <ActivityIndicator />;
  }

  return (
    <FlatList
      data={data}
      ListEmptyComponent={
          <View style={styles.flatListEmpty}>
              <Text style={{ fontWeight: 'bold' }}>No Data</Text>
          </View>
      }
      renderItem={({ item }) => (
          <View>
            <Text>User ID: {item.fullName}</Text>
          </View>
      )}
    />
  )
}

注意：如果后续项目引入了ESLint的Hooks规则校验，需要确认依赖数组里的所有值都是组件作用域内会变化的变量，避免出现遗漏依赖的问题。

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