无法将 class 转换为函数组件，"unmounted error"

Question

快速前言：如果您急于发布新帖子，请继续前进，而不是将其标记为重复，因为我真的需要帮助。如果我听起来很刺耳，我深表歉意，但我已经经历过太多次了。

我在将以下组件代码转换为基于函数的代码时遇到问题。有人可以帮忙吗？

class App extends React.Component {
  state = {loadings: [],};

  enterLoading = index => {
    this.setState(({ loadings }) => {
      const newLoadings = [...loadings];
      newLoadings[index] = true;
      return {loadings: newLoadings,};
    });
    setTimeout(() => {
      this.setState(({ loadings }) => {
        const newLoadings = [...loadings];
        newLoadings[index] = false;
        return {loadings: newLoadings,};
      });
    }, 6000);
  };

  render() {
    const { loadings } = this.state;
    return (
      <>
        <Button loading={loadings[1]} onClick={() => this.enterLoading(1)}>
          Click me!
        </Button>
      </>
    );
  }
}

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

这是我尝试过的：

const [loadings, setloadings] = useState([]);

useEffect((index) => {
  console.log("here");
  const newLoadings = [...loadings];
  newLoadings[index] = true;
  setloadings(newLoadings);

  setTimeout(() => {
    const newLoadings = [...loadings];
    newLoadings[index] = false;
    setloadings(newLoadings);
  }, 6000);
}, []);

// blah blah blah

<Button loading={loadings[0]} onClick={() => setloadings(0)}>Log in</Button>

基本上，我在不同的转换-class-到-函数教程之间跳来跳去，遇到了中描述的问题。然后我尝试实现我自己的版本 -- 但它没有用。

仅供参考，控制台中打印了“此处”，并且控制台没有抛出任何错误——只是按钮没有动画。

非常感谢。

Answer 1

虽然我最初的想法是您希望加载是 return 中已经初始化的数组。你试过用 loadings.length && 包装 JSX return 吗？

另一个想法是 useEffect 预计会在初始挂载时发生，并且还没有加载上下文。也许将上下文更改为 [loadings] 可能会解决这个问题。

编辑：要处理条件逻辑以防止运行除非采取行动，您可以这样做：

useEffect((index) => {
    if (loadings[index] !== true) {
      console.log("here");
      const newLoadings = [...loadings];
      newLoadings[index] = true;
      setloadings(newLoadings);

      setTimeout(() => {
        const newLoadings = [...loadings];
        newLoadings[index] = false;
        setloadings(newLoadings);
      }, 6000);
    }
}, [loadings]);

无法将 class 转换为函数组件，"unmounted error"

Can't convert class to function component, "unmounted error"

reactjs

react-hooks

react-class-based-component