0

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

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

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 教程之间跳来跳去，遇到了这个线程中描述的问题。然后我尝试实现我自己的版本——但它没有用。

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

提前谢谢了。

4

1 回答 1

1

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

另一个想法是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]);
于 2021-05-30T13:12:48.833 回答