React Native应用点击Questionnaire仅显示LoadingView而非BodyScreen

看起来你的核心问题是：点击"Questionnaire"按钮进入BodyScreen后，始终只显示LoadingScreen，而看不到BodyScreen的实际内容。这是因为BodyScreen被外层的<LoadingView>组件包裹，只有当predicate={() => organStore.loaded}返回true时，才会渲染内部的内容，否则一直显示加载状态。

问题根源 #

你的LoadingView组件逻辑很明确：

return predicate() ? (
  <View style={style}>{children}</View>
) : (
  <LoadingScreen style={styles.loading} text={text} />
);

现在一直显示加载界面，说明organStore.loaded这个状态始终为false（或等价的假值），没有满足渲染内容的条件。

分步排查与修复 #

1. 先验证organStore.loaded的实际值

在BodyScreen中添加调试日志，确认状态是否正确传递：

const BodyScreen = ({ navigation, organStore, questionStore }) => {
  // 添加这行调试，查看organStore的状态
  console.log("organStore状态：", organStore);
  console.log("loaded值：", organStore.loaded);

  return (
    <LoadingView predicate={() => organStore.loaded} style={styles.view}>
      {/* 原组件内容 */}
    </LoadingView>
  );
};

如果日志显示loaded是undefined或false，那就是状态本身的问题；如果是true但还是显示加载，再检查LoadingView的逻辑是否有其他问题。

2. 检查OrganStore的状态初始化与更新逻辑

• 初始状态：确认OrganStore的初始状态中，loaded是否被正确设置为false（比如const initialState = { loaded: false, ... }），避免出现undefined的情况。
• 加载完成后的状态更新：当器官数据加载成功时，是否在reducer中正确将loaded改为true？比如：

  // OrganStore/reducer.js示例
  case ORGAN_LOAD_SUCCESS:
    return {
      ...state,
      organs: action.payload,
      loaded: true, // 关键：加载成功后设置为true
      error: null
    };
  

• 错误处理：如果加载失败，是否也需要处理loaded状态？比如失败后可以保持false，但要添加错误提示，避免用户一直看到加载界面。

3. 确保进入BodyScreen时触发了数据加载

如果你的器官数据是异步加载的（比如从API或本地存储获取），需要确保在进入BodyScreen时触发加载动作：

import { loadOrgans } from '../../../store/OrganStore/actions';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';

const BodyScreen = ({ navigation, organStore, questionStore }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    // 进入屏幕时触发加载数据的action
    dispatch(loadOrgans());
  }, [dispatch]);

  // 原组件内容
};

4. 临时测试：强制跳过加载验证

可以临时把外层LoadingView的predicate改成() => true，如果此时能正常显示BodyScreen的内容，就100%确认是organStore.loaded的状态问题，集中精力排查状态管理逻辑即可。

额外提示：内层LoadingView的潜在问题 #

如果后续解决了外层加载问题，但底部按钮区域还是显示加载，那就要检查内层LoadingView的条件：

predicate={() => questionStore.loaded.slider && questionStore.loaded.radio && questionStore.loaded.text }

这需要questionStore中的三个loaded子状态都为true才会显示按钮，同样需要按照上述思路排查questionStore的状态更新逻辑。

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