React Native中如何用Axios调用指定API？求排查代码问题

你的代码有三个关键问题导致无法正确获取并使用数据：

• useEffect缺少依赖数组：没有给useEffect传入第二个参数（依赖数组），会导致组件每次渲染都重复执行这个effect，无限循环调用API。
• Axios响应数据获取错误：axios.get返回的是完整响应对象，接口返回的实际数据存在response.data属性里，你现在把整个响应对象存进了state，而非需要的接口数据。
• State初始值类型不匹配：目标API返回的是单个文章对象，但你初始state设为数组[]，类型不匹配，后续渲染容易出问题。

修正后的完整代码 #

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

const PostDetail = () => {
  // 初始值设为null，匹配接口返回的单个对象类型
  const [post, setPost] = useState(null);

  useEffect(() => {
    axios.get("https://jsonplaceholder.typicode.com/posts/5")
      .then((response) => {
        // 提取响应中的实际数据存入state
        setPost(response.data);
      })
      .catch((error) => console.error('请求出错:', error));
  }, []); // 空依赖数组，仅组件挂载时执行一次

  // 数据未加载完成时显示加载状态
  if (!post) {
    return <Text>加载中...</Text>;
  }

  return (
    <View style={{ padding: 16 }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>{post.title}</Text>
      <Text style={{ marginTop: 8 }}>{post.body}</Text>
    </View>
  );
};

export default PostDetail;

关键修正说明 #

1. 给useEffect添加空依赖数组[]，确保API请求只在组件首次挂载时执行一次，避免无限循环。
2. 在then回调中通过response.data获取接口返回的实际数据，再更新state。
3. 调整state初始值为null，并增加加载状态判断，避免数据未就绪时渲染出错。

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