React Native中如何让getRecipes函数仅发起一次API请求？

你的问题出在当前代码逻辑上：每次Recipes组件渲染时都会调用getRecipes函数，而这个函数内部每次都会重新创建useState状态，并且立即发起axios请求，导致请求反复执行，日志也持续打印。

正确写法调整 #

把状态管理和API请求逻辑整合到组件内部，利用useEffect控制请求仅执行一次：

import React from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

export default function Recipes({ navigation }: Props) {
  // 将状态定义在组件内部
  const [recipes, setRecipes] = React.useState([]);

  // 使用useEffect包裹API请求，空依赖数组确保仅组件挂载时执行一次
  React.useEffect(() => {
    axios.get('http://localhost:5000/api/v1/recipes')
      .then(response => {
        // 无需多余的map操作，直接赋值接口返回的数据
        setRecipes(response.data);
      }).catch(err => {
        console.log(err);
      });
  }, []);

  console.log(recipes);

  return (
    // ...其他代码
    <View>
      {/* 注意：不能直接渲染数组，需要遍历生成可渲染的组件，以下是示例 */}
      {recipes.map(recipe => (
        <Text key={recipe.id}>{recipe.name}</Text>
        // 根据你的数据结构替换成实际要展示的组件
      ))}
    </View>
  );
};

关键说明 #

1. 状态归属：将useState移到组件内部，确保状态属于组件实例，不会随函数调用重复创建。
2. useEffect的依赖数组：空数组[]作为useEffect的第二个参数，会让React仅在组件首次挂载时执行内部的请求逻辑，避免重复触发。
3. 多余代码优化：原代码中的response.data.map((recipe: Object) => recipe)没有实际作用，直接使用response.data即可。
4. 数组渲染注意事项：React Native无法直接渲染对象数组，必须遍历数组，为每个元素生成对应的React组件（如示例中的Text），同时要给每个组件添加唯一的key属性。

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