React useState中setState后API调用异常：仅返回函数名求助

问题原因 #

你在useState初始化时，给default字段赋值的是函数本身（() => callApiHere()），而非函数执行后的结果。所以state里存的一直是这个函数的引用，自然不会触发API调用，控制台打印的也是函数本身。

解决方案 #

根据你的需求，分两种场景处理：

场景1：组件初始化时就执行API，并把结果存入state

如果是同步API，可直接在useState初始化时执行函数：

const [state, setState] = React.useState({ 
  default: callApiHere(), 
  defaultTab: "" 
});

useEffect(() => {
    console.log(state, 'current state values')
}, [state])

如果是异步API，必须把调用逻辑放在useEffect里（useState初始化不支持异步逻辑）：

const [state, setState] = React.useState({ 
  default: null, // 先初始化默认值
  defaultTab: "" 
});

useEffect(() => {
  const fetchData = async () => {
    const result = await callApiHere();
    setState(prev => ({ ...prev, default: result }));
  };
  fetchData();
}, []); // 空依赖，仅组件挂载时执行一次

useEffect(() => {
    console.log(state, 'current state values')
}, [state])

场景2：调用setState时才触发API

如果需要手动触发setState时再执行API，要在调用时主动执行函数获取结果：

// 示例：点击事件触发setState并调用API
const handleUpdateState = () => {
  setState(prev => ({
    ...prev,
    default: callApiHere(), // 主动执行函数拿到结果
    defaultTab: "updated-tab"
  }));
};

关键提醒 #

• useState的初始化参数如果是函数，只有当你把它作为初始化逻辑（比如useState(() => initValue)）时才会自动执行，但你这里是把函数作为对象属性值，所以不会触发执行。
• 异步操作绝对不能放在useState初始化中，必须放在useEffect或事件处理函数内，避免引发无限渲染或内存泄漏问题。

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