React Native中useEffect引发崩溃问题求助

核心问题定位 #

你的HomeLoad组件中，useEffect未设置依赖数组，导致组件每次渲染时重复调用load函数，触发无限循环，最终引发应用崩溃。

具体修复步骤 #

1. 修复useEffect无限循环 #

修改HomeLoad组件的useEffect逻辑，添加空依赖数组确保仅挂载时执行一次，同时用useRef避免状态依赖导致的重复执行：

import React, { useState, useEffect, useRef } from 'react'; // 新增useRef导入

export function HomeLoad(props) {
  const [Activity, setlistActivity] = useState([]);
  const isLoaded = useRef(false); // 标记是否已完成数据加载

  const load = async () => {
    if (!isLoaded.current) {
      const list = await getlist();
      setlistActivity(list);
      isLoaded.current = true;
    }
  };

  useEffect(() => {
    load();
  }, []); // 空依赖数组，仅组件挂载时执行一次

  return <Home eventlist={Activity} props={props} />;
}

2. 修复其他潜在异常问题 #

• Marker的key值异常：Math.random()会生成重复key，导致React渲染警告或异常，替换为数据中的唯一标识：

<Marker
  key={objectvalue.id} // 替换原Math.random()，使用数据自身唯一ID
  coordinate={{
    latitude: objectvalue.latitudine || this.state.userLat,
    longitude: objectvalue.longitudine || this.state.userLon
  }}
>
  {/* Marker内容 */}
</Marker>

• Linking未导入：代码中使用Linking但未引入，在顶部添加导入：

import { Linking } from 'react-native';

• Image的无效onPress：TouchableHighlight已绑定点击事件，内部Image的onPress不会触发，直接移除：

<TouchableHighlight onPress={() => Actions.addactivity()}>
  <Image
    style={styles.image}
    source={require('../assets/images/add.png')}
  />
</TouchableHighlight>

修复后验证 #

完成修改后重新运行应用：

• useEffect仅在组件挂载时执行一次，无无限循环问题
• Marker渲染稳定，无重复key警告
• 所有交互逻辑正常触发

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