Javascript React错误：在刷新页面之前组件不会呈现

我有一个从页面调用的旋转木马组件，但在刷新页面之前它不会显示。如果我有Box组件并切换到Carousel组件，它在刷新页面之前不会工作，但是如果我先渲染Carousel组件，渲染Box然后返回Carousel，它会工作。这是ReactDOM的bug还是什么

我的转盘组件：

const Carousel = () => {
  const { carousel, setCarousel } = useContext(AppContext);

  useEffect(() => {
    setCarousel(true);
    return () => {
      setCarousel(false);
    };
  }, [carousel]);

  const items = ["image1.svg", "image2.svg", "image1.svg", "image2.svg"];

  const responsive = {
    0: { items: 1 },
    1024: { items: 2 },
  };

  return (
    <div
      className={`container flex`}
      style={{
        marginTop: "40px",
      }}>
      <AliceCarousel
        disableDotsControls
        disableButtonsControls
        autoHeight={true}
        autoWidth={true}
        responsive={responsive}
        animationType='slide'>
        {items.map((i, index) => (
          <img src={i} key={index} alt='' srcSet='' className={Styles.slider} />
        ))}
      </AliceCarousel>
         </div>
  );
};

const Carousel=（）=>{
const{carousel，setCarousel}=useContext（AppContext）；
useffect（（）=>{
setCarousel（真）；
return（）=>{
旋转木马（假）；
};
}，[旋转木马]；
const items=[“image1.svg”、“image2.svg”、“image1.svg”、“image2.svg”]；
常数响应={
0:{items:1}，
1024:{items:2}，
};
返回(
{items.map（（i，索引）=>(
))}
);
};

我在另一个组件上切换/调用它，如下所示：

const { carousel, modalIsOpen, openModal, closeModal } = useContext(
  AppContext
);

return (
  <div className={carousel ? Styles.layout : ""}>
    <div>
      <Box />
    </div>
  </div>
)

const{carousel，modalIsOpen，openModal，closeModal}=useContext(
AppContext
);
返回(
)

我需要在调用组件时重新呈现该组件，这样它才能正常工作，即使在我直接调用页面上的AliceCarousel组件时，我仍然存在此问题

---

这与React或组件本身有关吗？感谢

您的

useffect

逻辑导致无限循环，因为在将状态更改为

true

之后，通过在dep数组

[carousel]

中设置状态，您可以从清理功能将其更改回

false

// Useless useEffect, always false.
useEffect(() => {
    setCarousel(true);
    return () => {
      setCarousel(false);
    };
}, [carousel]);

• 看

---

不是这样，如果我不将setCarousel返回false，则carousel将始终保持true。我需要在卸载组件时将其设置为false。当页面加载时，我必须完全呈现旋转木马，这样当我从box组件切换到它时它才能工作