为什么React Hook的set函数无法正常设置state？React Native+Firestore场景

问题根因 #

• 状态更新逻辑错误：doctorDetails初始值为数组，但遍历查询结果时直接用单条文档数据覆盖状态，若返回多条数据只会保留最后一条，且状态类型会从数组变为对象，不符合预期。
• 对setState异步机制认知错误：React中setState是异步更新操作，调用setDoctorDetails后立即打印状态，拿到的是当前渲染周期的旧值，会造成「更新未生效」的误判。
• useEffect依赖缺失：副作用函数中使用了specialist参数，但依赖数组为空，若组件挂载后specialist发生变化，不会重新触发数据拉取。
• 潜在导入错误：firebase配置文件导入路径写为firebaseCofig，大概率是firebaseConfig的拼写错误，若本地文件名不匹配会导致db未定义，整个查询逻辑直接报错终止。

修正代码 #

import React, { useState, useEffect } from 'react';
import { View, Text, FlatList } from 'react-native';
import { collection, query, where, getDocs } from 'firebase/firestore';
// 注意修正配置文件的拼写
import { db } from '../../firebase/firebaseConfig';

export default function FilteredDoctorsScreen({ route, navigation }) {
  const { specialist } = route.params;
  const [doctorDetails, setDoctorDetails] = useState([]);

  useEffect(() => {
    const fetchDoctors = async () => {
      try {
        const q = query(
          collection(db, 'Doctors'),
          where('specialist', '==', specialist)
        );
        const querySnapshot = await getDocs(q);
        // 先收集所有文档数据再一次性更新状态
        const doctorsList = querySnapshot.docs.map(doc => doc.data());
        setDoctorDetails(doctorsList);
      } catch (err) {
        console.error('拉取医生数据失败：', err);
      }
    };
    fetchDoctors();
  // 把用到的specialist加入依赖数组
  }, [specialist]);

  // 监听状态变化验证更新结果
  useEffect(() => {
    console.log('更新后的DoctorDetails：', doctorDetails);
  }, [doctorDetails]);

  // 渲染验证
  return (
    <View>
      <FlatList
        data={doctorDetails}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({item}) => <Text>{item.name}</Text>}
      />
    </View>
  );
}

验证方式 #

修改后可以直接通过页面渲染的列表判断数据是否拉取成功，也可以看第二个监听doctorDetails的useEffect中打印的结果，该打印会在状态更新完成后触发，拿到的是最新值。

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