React中useEffect多次渲染求助：API取随机单词仅需打印一次

问题根源 #

React组件每次渲染（包括初始渲染、状态/ props变动、父组件重渲染）时，函数体内的代码都会重新执行。如果直接在组件顶层调用API请求函数，自然会重复触发，导致控制台多次打印。

可行解决方案 #

1. 用useEffect限定执行时机（最推荐） #

把API请求放到useEffect钩子中，设置空依赖数组[]，就能让请求只在组件首次挂载时执行一次：

import { useEffect } from 'react';

function WordComponent() {
  const fetchRandomWord = async () => {
    try {
      const response = await fetch('你的API接口地址');
      const data = await response.json();
      console.log(data.word); // 只会打印一次
    } catch (error) {
      console.error('获取单词失败:', error);
    }
  };

  // 空依赖数组确保仅首次挂载执行
  useEffect(() => {
    fetchRandomWord();
  }, []);

  return <div>组件内容</div>;
}

2. 修正useRef的错误用法 #

如果之前用useRef没生效，大概率是没配合useEffect，或者标记逻辑写错了。正确写法是用ref标记是否已经执行过请求：

import { useEffect, useRef } from 'react';

function WordComponent() {
  const hasFetched = useRef(false);

  const fetchRandomWord = async () => {
    // 已经请求过就直接返回
    if (hasFetched.current) return;
    hasFetched.current = true;

    try {
      const response = await fetch('你的API接口地址');
      const data = await response.json();
      console.log(data.word);
    } catch (error) {
      console.error('获取单词失败:', error);
    }
  };

  // 必须配合useEffect，避免每次渲染都进入函数判断
  useEffect(() => {
    fetchRandomWord();
  }, []);

  return <div>组件内容</div>;
}

3. 排查组件是否被重复挂载 #

如果上面的方法还是没用，要检查组件是不是被父组件反复挂载/卸载。可以用React.memo包裹组件，减少不必要的重渲染：

import { memo, useEffect } from 'react';

const WordComponent = memo(() => {
  useEffect(() => {
    const fetchRandomWord = async () => {
      const response = await fetch('你的API接口地址');
      const data = await response.json();
      console.log(data.word);
    };
    fetchRandomWord();
  }, []);

  return <div>组件内容</div>;
});

避坑提醒 #

• 别直接在组件函数体顶层调用异步请求，不然每次渲染都会跑一遍。
• async/await只是处理异步逻辑的语法，管不了执行时机，必须搭配useEffect来控制什么时候执行。

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