React Native中不重置状态更新页面列表的异常排查

问题根源 #

你的useEffect依赖数组为空，导致其中的setTrackListener回调形成闭包，始终捕获组件首次渲染时的trackList初始值（空数组）。每次监听到新曲目时，都是基于这个空数组创建新数组并添加元素，所以trackList永远只会保留最后一个添加的曲目，日志里显示的Current trackList也始终为空。另外，setTrackList是异步更新，调用后立即打印trackList显示旧值是React的正常特性，但核心问题还是闭包导致的state捕获错误。

解决方案 #

1. 使用函数式更新State

将setTrackList改为函数式调用，它会接收当前最新的trackList值，彻底避免闭包带来的旧值问题：

useEffect(() => {
  const unsubscribe = setTrackListener(roomID, (t) => {
    if (t != null) {
      console.log("Track Name: " + t.name);
      // 函数式更新，获取最新的trackList状态
      setTrackList(prevTrackList => {
        const newArray = [...prevTrackList, t.name];
        console.log("Current trackList: ", prevTrackList);
        console.log("NewArray: ", newArray);
        return newArray;
      });
    }
  });

  // 组件卸载时移除监听器，防止内存泄漏
  return () => unsubscribe();
}, [roomID]); // 依赖roomID，确保roomID变化时重新绑定监听器

2. 补充监听器清理逻辑

修改setTrackListener，让它返回Firebase监听的卸载函数，用于组件卸载时清理：

let setTrackListener = (id, onChange) => {
  let tracksRef = ref(database, `rooms/${id}/tracks`);
  const unsubscribe = onChildAdded(tracksRef, (snapshot) => {
    const data = snapshot.val();
    console.log("Change detected in setTrackListener");
    onChange(data);
  });
  // 返回卸载函数
  return unsubscribe;
};

3. 优化roomID与authToken的存储

直接在组件函数体赋值会导致重复执行，改用useState和useRef管理：

// 用useState存储roomID，变化时触发组件更新
const [roomID, setRoomID] = useState("");
// 用useRef存储authToken，无需触发更新
const authTokenRef = useRef("");

useEffect(() => {
  if (!roomID) {
    const newRoomID = createRoom();
    setRoomID(newRoomID);
  }
}, []);

useEffect(() => {
  if (!authTokenRef.current) {
    getAuthAccessToken().then((t) => {
      authTokenRef.current = t;
    });
  }
}, []);

效果验证 #

修改完成后，每次监听到新曲目时，都会基于最新的trackList添加元素，FlatList会正确渲染所有曲目，日志中的Current trackList也会显示当前最新的数组内容。

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