React Native获取指定ID数据遇无限循环及429错误求助

1. 无限循环的根本原因 #

你的按钮写法存在核心问题：

<Button title="Detail" onPress={getAnime(item.mal_id)} />

此处onPress直接执行了getAnime(item.mal_id)，而非传递函数引用。组件渲染时会立刻触发该函数，函数内的setAnime会更新状态，状态更新又触发组件重新渲染，重新渲染时再次调用getAnime，往复形成无限循环，最终触发Maximum update depth exceeded错误。之前的API 429错误也是同理——组件反复渲染导致API被重复调用。

2. 代码修复方案 #

修复点击事件绑定 #

将onPress改为传递匿名函数，确保仅在点击时执行getAnime：

<Button title="Detail" onPress={() => getAnime(item.mal_id)} />

优化数据查找逻辑 #

由于mal_id是唯一标识，用find替代filter更高效（直接返回单个对象，而非数组）：

const getAnime = (id) => {
  const targetAnime = data.find((item) => item.mal_id === id);
  console.log(targetAnime);
  setAnime(targetAnime);
};

3. 详情组件实现建议（React Native新手友好） #

方案一：Modal导航器实现 #

• 在导航容器中配置Modal栈，将详情组件注册为Modal类型的屏幕
• 点击按钮时，调用导航的navigate方法跳转至Modal，并传入选中的动漫数据
• 详情组件通过route.params接收传递的数据，渲染详情内容

方案二：直接传递参数到目标组件 #

这种方式无需维护额外状态，直接在跳转时传递当前项数据，步骤如下：

1. 列表项点击事件中传递数据：

<Button 
  title="Detail" 
  onPress={() => navigation.navigate('DetailScreen', { anime: item })} 
/>

2. 详情组件接收并使用数据：

function DetailScreen({ route }) {
  const { anime } = route.params;
  return (
    <View>
      <Text>{anime.title}</Text>
      {/* 渲染其他详情内容 */}
    </View>
  );
}

该方案避免了状态维护带来的循环风险，更适合你的场景。

内容的提问来源于stack exchange，提问作者Ekatama Ilham Prayoga