无法将类转换为功能组件，“未安装错误”

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>

基本上我在不同的 convert-class-to-funtion 教程之间跳来跳去，遇到了this thread 中描述的问题。然后我尝试实现我自己的版本——但没有成功。

仅供参考，“这里”已打印在控制台中，并且控制台没有抛出任何错误——按钮只是不会动画。

非常感谢。

Answer 1

我最初的想法是，您希望 loadings 在您的回报中是一个已经初始化的数组。您是否尝试过使用 loadings.length && 包装 JSX 返回？

另一个想法是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]);