React Hook状态重复设置问题：如何仅调用一次getData函数？

这是个非常常见的React新手问题，我来帮你理清楚问题根源和解决办法：

为什么会无限触发状态更新？ #

你现在把getData()直接写在组件的顶层代码中，而React组件每次渲染（包括调用setXxx后触发的重新渲染）都会执行一遍顶层的所有代码。这样就形成了一个死循环：

1. 组件渲染 → 调用getData() → 执行setXxx()
2. setXxx()触发组件重新渲染 → 再次调用getData() → 再次执行setXxx()
3. 循环往复，直到React触发性能预警或报错

如何让getData只运行一次？ #

最常用且可靠的方式是使用useEffect钩子，通过控制它的依赖数组来限制执行次数：

方案1：用useEffect包裹getData调用 #

把getData()放到useEffect里，并传入一个空的依赖数组[]，这会告诉React这个副作用只需要在组件首次挂载完成后执行一次：

import { useState, useEffect } from 'react';

interface Xxx { str: string }

function YourComponent() {
  const [xxx, setXxx] = useState<Xxx>();

  function getData() {
    setXxx({ str: "aaa" });
  }

  // 仅在组件首次挂载时执行一次
  useEffect(() => {
    getData();
  }, []); // 空数组是核心，确保只执行一次

  return <div>{xxx?.str}</div>;
}

注意事项：

如果后续你给getData添加了依赖（比如用到了其他状态、props或者变量），一定要把这些依赖项加到useEffect的依赖数组里，否则会遇到闭包导致的旧值问题。

方案2：直接把逻辑写在useEffect中（更简洁） #

如果getData的逻辑很简单，也可以省去单独的函数，直接把状态更新逻辑写在useEffect里：

import { useState, useEffect } from 'react';

interface Xxx { str: string }

function YourComponent() {
  const [xxx, setXxx] = useState<Xxx>();

  useEffect(() => {
    // 直接执行状态更新，同样只运行一次
    setXxx({ str: "aaa" });
  }, []);

  return <div>{xxx?.str}</div>;
}

额外提醒 #

永远不要在组件顶层直接调用会触发状态更新的函数（比如setXxx或者调用它的函数），这几乎必然会导致无限渲染循环——这是由React的渲染机制决定的，组件每次重新渲染都会从头执行一遍所有顶层代码。

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