React组件渲染时API请求重复执行两次的问题及修复方法咨询

问题根源 #

1. 渲染时重复执行函数：你在SinglePost组件的JSX中直接调用getData()，组件每次渲染都会执行这个函数。React开发环境默认开启严格模式，会强制组件渲染两次来检测副作用，导致API请求被触发两次。
2. 异步函数返回值错误：getData是异步函数，返回的是Promise对象，而非实际的帖子数据，这会导致Post组件无法拿到正确的内容。

通用修复方案 #

修改SinglePost组件，使用useState存储数据，useEffect控制API请求的执行时机：

import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router';
import Post from './Post';

export const SinglePost = () => {
  const { id } = useParams();
  const [post, setPost] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 定义异步请求函数
    const fetchPost = async () => {
      try {
        const response = await axios.get(`post/${id}`);
        setPost(response.data);
        setError(null);
      } catch (err) {
        setError('加载帖子失败');
        console.error(err);
      }
    };

    // 执行请求
    fetchPost();
  }, [id]); // 依赖id，只有id变化时才重新请求

  // 处理加载、错误状态
  if (error) return <div>{error}</div>;
  if (!post) return <div>加载中...</div>;

  return <Post post={post} />;
};

关键说明 #

• useEffect的作用：useEffect会在组件挂载完成后执行一次，当依赖数组[id]中的值变化时重新执行，避免了每次渲染都触发请求。
• 状态管理：用useState存储帖子数据和错误信息，能合理处理加载、成功、失败三种状态，提升用户体验。
• 严格模式兼容：即使开发环境开启严格模式，useEffect内部的请求也只会执行一次（严格模式会触发useEffect的清理，但不会重复执行请求逻辑）。

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