如何让Fetch请求结果初始值不为undefined？实现FlatList页面加载即渲染

完全可行，只需调整几个关键逻辑，让组件挂载时自动完成数据请求并更新FlatList，无需手动刷新页面，具体调整如下：

1. 确保useEffect仅在组件挂载时触发 #

给useEffect添加依赖数组，保证异步请求在组件首次挂载时执行；如果请求参数likes、dislikes、survey是组件状态，需要将它们加入依赖数组，避免使用旧数据发起请求：

useEffect(() => {
  const fetchRecipes = async () => {
    // 原有请求逻辑
  };
  fetchRecipes();
}, [likes, dislikes, survey]); // 空数组仅挂载执行，有状态依赖则添加对应变量

2. 初始化状态避免undefined异常 #

将result的初始状态设为空数组，确保FlatList在数据返回前有合法的数据源：

const [result, setResult] = useState([]);
const [loading, setLoading] = useState(true);

3. 完善API响应处理逻辑 #

增加响应状态检查，用可选链避免result_data为undefined时的报错，同时单独处理JSON解析异常：

const response = await fetch(
  `https://25jg62s1m6.execute-api.us-east-1.amazonaws.com/test/kohoquery/palette_analyzer`,
  { /* 请求配置 */ }
);

// 先判断请求是否成功
if (!response.ok) {
  throw new Error(`请求失败，状态码：${response.status}`);
}

const result_data = await response.json();
if (result_data?.body) {
  try {
    const parsedData = JSON.parse(result_data.body);
    setResult(parsedData);
  } catch (parseErr) {
    console.log("解析返回数据失败:", parseErr);
  }
} else {
  console.log("暂无食谱数据");
}
setLoading(false);

4. FlatList配合加载状态渲染 #

利用loading状态控制加载提示和FlatList的显示，提升用户体验：

{loading ? (
  <Text>加载中...</Text>
) : (
  <FlatList
    data={result}
    keyExtractor={(item) => item.id?.toString() || Math.random().toString()}
    renderItem={({ item }) => (
      <Image 
        source={{ uri: item.imageUrl }} 
        style={{ width: 100, height: 100 }} 
      />
    )}
  />
)}

调整后，组件首次进入会自动发起请求，请求完成后更新result状态，FlatList会自动响应状态变化渲染图片，无需手动刷新页面。

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