无法在响应式轮播中执行条件渲染

如何解决无法在响应式轮播中执行条件渲染

我在 React 中循环遍历数组并有条件地返回 carousel 组件内部。

代码：

  projects.map((proj) => {
   if(proj.active){
      return (
        <Carousel emulatetouch swipeable useKeyboardArrows infiniteLoop>
          <ProjectItemmob singleProject={proj} />
        </Carousel>
      );
   }
  })

这给了我一个错误：Uncaught TypeError: Cannot read property 'type' of null

有任何修复吗？没有条件也能用，但是我需要加条件。

编辑：

首先根据条件过滤数组并更新状态。

 const [allEnabledProjects,setallEnabledProjects] = React.useState([]);

 React.useEffect(() => {
   if (projects) {
     let enabledProjects = projects.filter(
       (proj) => proj.isActive === true
    );
     if (enabledProjects.length > 0) {
       setallEnabledProjects(enabledProjects);
     } else {
       setallEnabledProjects([]);
     }
   }
 },[projects]);

之后，使用过滤后的数组进行映射，这样我们就不必将条件放在 Carousel 组件中。

 allEnabledProjects.map((proj) => {
    return (
      <Carousel emulatetouch swipeable useKeyboardArrows infiniteLoop>
        <ProjectItemmob singleProject={proj} />
      </Carousel>
    );
 })

虽然我可以使用不同的方法并且它正在工作，但我仍然无法弄清楚为什么 Carousel 组件内部的调节会引发该错误。