我目前正在做下一个项目,遇到了一个与使用效果挂钩和条件渲染相关的问题.以下是有问题的代码片段:

const ImageGeneration: React.FC<{
  subscribedUsersData: any
  error: any; // Replace 'any' with the actual type of error if possible
}> = ({ subscribedUsersData, error }) => {
  const isDisplayEnabled = IsDisplayEnabled();

  if (error) {
    return null; // or return some appropriate JSX here
  }

  useEffect(() => {
    const updateExpiryDate = async () => {
      // Your logic for updating expiry date goes here
    };

    updateExpiryDate();
  }, [subscribedUsersData]);

  // Rest of your component logic goes here

  return (
    // JSX for the component goes here
  );
};

我特别感兴趣的是将if(Error)语句放在顶部,以避免在出现错误时不必要地执行Use Effect块.我希望您能就这种方法是否合适,或者是否有更好的做法来处理这种情况提出见解.

推荐答案

另外还有Drew Reese's answer个.

似乎error属性唯一的功能是避免呈现ImageGeneration的JSX(或呈现回退).

在这种情况下,如果有错误而不是传递错误,则更容易避免从父级调用ImageGeneration:

{!error && <ImageGeneration subscribedUsersData={subscribedUsersData} />}

或者通过呈现一种后备:

{error ? <div>{error}</div> : <ImageGeneration subscribedUsersData={subscribedUsersData} />}

Reactjs相关问答推荐

如何使用Reducer更新全局变量

可选链和useState挂钩

Redux Provider Stuck甚至彻底遵循了文档

设置自定义形状的纹理

我无法通过 useContext 显示值

画布:用鼠标绘制形状时重新绘制整个画布会导致卡顿

如何管理可重用无线电输入的 React 状态?

使用D3.js绘制和展示弦图的右下方象限

当每个元素都可拖动时,移动设备上的滚动列表出现问题

Cypress 组件测试不渲染react 组件(但它的内容)

react - 警告:列表中的每个子元素都应该有一个独特的 keys props ,即使我已经设置了 keys

错误:无效挂钩调用.钩子只能在函数组件的主体内部调用.使用 next/router 时

React Router v6 - 访问嵌套路由和处理手写 url 的正确方法

用 scss 覆盖 MUI

组件焦点上的 MUI 更改栏 colored颜色

如何用实际的br标签替换axios响应中的br标签?

React LinkProps 的含义

在状态中存储多个选定的选项

如何在 React x 中返回组件?

Map 函数只返回 Array 中的图像