React类组件转函数组件失败：遇“unmounted error”且按钮无动画效果求助

我来帮你搞定这个转换问题！你的函数式组件代码里有几个关键问题导致加载动画没生效，咱们一步步修正：

你的代码存在的核心问题 #

• 误用useEffect：useEffect是处理组件生命周期副作用的钩子，不能用来处理点击事件的逻辑。你写的useEffect依赖是空数组，只会在组件挂载时执行一次，点击按钮根本没触发正确的状态更新。
• 点击事件逻辑错误：你之前的onClick={() => setloadings(0)}直接把状态设为0，完全不符合“对应索引设置加载状态”的需求。
• 闭包捕获旧状态：setTimeout里直接使用loadings会捕获到函数创建时的旧状态，导致6秒后的状态更新出错。
• 状态值可能为undefined：初始空数组访问索引时得到undefined，部分Button组件可能无法识别这个值作为加载状态。

修正后的函数式组件代码 #

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import Button from '你的Button组件路径'; // 替换为实际组件路径

const App = () => {
  // 初始化空数组，保持和原类组件一致
  const [loadings, setLoadings] = useState([]);

  const enterLoading = (index) => {
    // 使用函数式更新获取最新状态，避免闭包问题
    setLoadings(prevLoadings => {
      const newLoadings = [...prevLoadings];
      newLoadings[index] = true;
      return newLoadings;
    });

    setTimeout(() => {
      // 同样用函数式更新，确保拿到最新的loadings状态
      setLoadings(prevLoadings => {
        const newLoadings = [...prevLoadings];
        newLoadings[index] = false;
        return newLoadings;
      });
    }, 6000);
  };

  return (
    <>
      {/* 用|| false确保loading属性是布尔值，避免undefined导致组件不识别 */}
      <Button loading={loadings[1] || false} onClick={() => enterLoading(1)}>
        Click me!
      </Button>
    </>
  );
};

ReactDOM.render(<App />, mountNode);

关键逻辑说明 #

1. 提取点击回调函数：把原类组件的enterLoading方法转换成函数式组件里的普通函数，专门处理点击后的加载状态切换。
2. 函数式状态更新：在setLoadings里使用prevLoadings => {...}的形式，确保每次更新都基于最新的状态值，解决闭包导致的旧状态问题。
3. 处理undefined状态：在loading属性里添加|| false，保证组件始终拿到布尔类型的加载状态值。

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