React Native Modal未响应父组件state更新显示旧数据问题

• React状态更新是异步批处理机制：你在handleAdd中同步执行setHomeData(data)后立刻调用showHomeModal()，此时状态更新还未提交生效，Modal首次挂载时拿到的是打开瞬间的旧状态快照，因此初始渲染展示的是默认初始数据。
• 你使用的Modal是通过Portal渲染的，部分UI库的Portal组件会在挂载时缓存初始传入的props，虽然后续状态更新会触发组件重渲染、让你在日志中拿到最新值，但Modal内部未对props变化做响应式刷新，就会出现渲染结果和日志不一致的问题。
• 你贴出的代码中Starters组件未声明接收setHomeData、showHomeModal作为入参，属于代码省略问题，不影响核心故障判断。

按推荐优先级排序：

方案1：状态更新完成后再唤起Modal（最稳妥，无兼容问题） #

通过useEffect监听数据状态变化，确保数据更新提交完成后再执行Modal唤起逻辑，从根源上避开状态异步更新的时序问题。
修改HomeScreen代码：

const HomeScreen = () => {
  const [homeData,setHomeData] = useState(/* 你的初始数据 */);
  const [homeModalVisible, setHomeModalVisible] = useState(false);
  // 新增标记：记录是否需要在数据更新后打开Modal
  const [needOpenModal, setNeedOpenModal] = useState(false);

  // 监听数据更新，数据生效后再打开Modal
  useEffect(() => {
    if (needOpenModal) {
      setHomeModalVisible(true);
      setNeedOpenModal(false);
    }
  }, [homeData, needOpenModal]);

  // 透传给Starters的唤起方法，只打标记不直接开Modal
  const triggerOpenModal = () => {
    setNeedOpenModal(true);
  };

  // 其余代码省略...

  return (
    {/* 其余组件省略 */}
    <Portal>
      <HomeStarterModal
        homeModalVisible={homeModalVisible}
        homeData={homeData}
        hideHomeModal={() => setHomeModalVisible(false)}
      />
    </Portal>
    <ScrollView horizontal>
      <Starters
        item={itemData["Vits"]}
        setHomeData={setHomeData}
        triggerOpenModal={triggerOpenModal}
      />
      <Starters
        item={itemData["Vits2"]}
        setHomeData={setHomeData}
        triggerOpenModal={triggerOpenModal}
      />
    </ScrollView>
  )
}

修改Starters组件的handleAdd逻辑：

const Starters = ({item, setHomeData, triggerOpenModal}) => {
  const handleAdd = (data) => {
    setHomeData(data);
    triggerOpenModal();
  };
  // 其余代码省略...
}

方案2：Modal直接接收打开时传入的最新数据（逻辑最简单） #

不依赖全局homeData状态给Modal传值，打开Modal时直接把当前选中的数据作为入参传入，绕开状态同步的时序问题：

// HomeScreen中
const [homeModalVisible, setHomeModalVisible] = useState(false);
const [modalData, setModalData] = useState(homeData);

const showHomeModal = (data) => {
  setModalData(data);
  setHomeModalVisible(true);
  // 如果全局需要用到这份数据，再同步更新homeData即可
  setHomeData(data);
};

// Modal渲染时用modalData代替homeData
<HomeStarterModal
  homeModalVisible={homeModalVisible}
  homeData={modalData}
  hideHomeModal={() => setHomeModalVisible(false)}
/>

Starters中点击时直接把数据传给showHomeModal即可，不需要等状态更新。

方案3：给Modal加动态key强制重渲染（快速修复，适合简单场景） #

如果不想改动现有逻辑，可以给Modal组件绑定随homeData变化的key，每次数据更新时强制Modal重新挂载，确保拿到最新props：

<HomeStarterModal
  key={JSON.stringify(homeData)}
  homeModalVisible={homeModalVisible}
  homeData={homeData}
  hideHomeModal={hideHomeModal}
/>

注意：如果homeData结构非常复杂，JSON序列化会有一定性能开销，不适合大数据量场景使用。

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