React Native子组件调用父组件状态更新函数失败求助

核心问题1：子组件未正确调用父组件传递的函数 #

在OnboardingScreen.js中，你仅引用了setOnboardingComplete函数，但未执行调用操作。需要添加括号触发函数执行：

修改前： #

// handleNext 方法内
setOnboardingComplete;

// handleSkip 方法内
setOnboardingComplete;

修改后： #

// handleNext 方法内
setOnboardingComplete();

// handleSkip 方法内
setOnboardingComplete();

核心问题2：父组件函数定义位置错误，导致传递给子组件的是undefined #

在App.js中，onPressFinish和getStorage函数定义在if (!onboarded)的return语句之后。当App组件渲染时，若!onboarded为true，会直接返回OnboardingScreen，此时后续的函数定义尚未执行，传递给子组件的setOnboardingComplete会是undefined，自然无法触发调用。

需将这两个函数移至if (!onboarded)判断语句之前：

修改后的App.js核心代码片段： #

function App() {
  const [onboarded, setOnboarded] = useState(null); // 初始设为null，明确未读取存储状态

  const onboardingImages = [...]; // 保持原有数组内容不变

  // 提前定义getStorage函数
  const getStorage = async () => {
    const onboarded = await AsyncStorage.getItem('ONBOARDED');
    setOnboarded(JSON.parse(onboarded));
  };

  // 提前定义onPressFinish函数
  const onPressFinish = async () => {
    await AsyncStorage.setItem(
      'ONBOARDED',
      JSON.stringify({
        Onboarded: true,
      }),
    );
    // 同步更新本地状态，无需重启APP即可切换到主界面
    setOnboarded({Onboarded: true});
    console.log('Onboarded Set To TRUE!! :)');
  };

  useEffect(() => {
    const init = async () => {
      getStorage();
      console.log('AsyncStorage has been read.');
    };

    init().finally(async () => {
      await RNBootSplash.hide({fade: true, duration: 500});
      console.log('Bootsplash has been hidden successfully');
    });
  }, []);

  if (!onboarded) {
    return (
      <OnboardingScreen
        images={onboardingImages}
        setOnboardingComplete={onPressFinish}
        onboarded={onboarded}
      />
    );
  }

  return (...); // 保留原有主界面渲染逻辑
}

额外优化建议 #

• 在onPressFinish中调用setOnboarded({Onboarded: true})，可实现引导完成后立即切换界面，无需等待APP重启。
• 引导页判断逻辑可优化为if (!(onboarded?.Onboarded))，精准判断存储的引导完成状态，避免对象类型的真值判断歧义。

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