Reactjs 将其存储在useRef挂钩中，并将可变值保留在'；中；。当前'；财产

根据一个变量，我希望实现条件渲染。源代码：

我的变量

let hideDeleteButton = false;

useEffect-检查变量的值

useEffect(() => {
  if (projects?.length === 0 || useCases?.length === 0) {
    hideDeleteButton = false;
  } else {
     hideDeleteButton = true;
  }
}, []);

条件渲染

const DeleteButton = () =>
 hideDeleteButton ? (
   <Tooltip
     content={<TooltipContent title="The component belongs to either project or use case." />}
   >
     <span>
       <Button disabled onClick={handleDelete} color="error" classes={{ root: classes.button }}>
         {t('catalogPage.componentDetails.actionBar.deleteComponent')}
       </Button>
     </span>
   </Tooltip>
 ) : (
   <Button onClick={handleDelete} color="error" classes={{ root: classes.button }}>
     {t('catalogPage.componentDetails.actionBar.deleteComponent')}
   </Button>
 );

return (
 <ActionBar>
   <DeleteButton />
 </ActionBar>
);

constdeletebutton=（）=>
隐藏删除按钮？(
{t（'catalogPage.componentDetails.actionBar.deleteComponent'）}
) : (
{t（'catalogPage.componentDetails.actionBar.deleteComponent'）}
);
返回(
);

我得到了这样的警告：

从React钩子内部分配给“hideDeleteButton”变量 每次渲染后，useEffect将丢失。保存价值超过 时间，将其存储在useRef挂钩中，并将可变值保留在 “.current”属性。否则，可以直接移动此变量 内部效应

---

我到底应该做什么？

对于任何与渲染相关的内容，请使用

状态

而不是

ref

。更改

ref

不会触发渲染

let hideDeleteButton=false

可能是

const[hideDeleteButton，setHideDeleteButton]=useState（false）

然后在您的
useffect
中：-

useEffect(() => {
  const hideDeleteButton = projects?.length === 0 || useCases?.length === 0)?false:true 
setHideDeleteButton(hideDeleteButton);
}, []);

同样重要的是，简单地声明
let
、
var
或
const
变量在React流中没有用处。在每次渲染中，它们将重新初始化并丢失其旧值。
这里的
ref
没有任何用处，因为您需要一个有条件的
渲染
。如果您不希望某个值参与
渲染
流，但仍希望记住任何其他用例中多个
渲染
之间的该值，则这是有意义的。
谢谢您的回答。但是如果使用const hideDeleteButton或using state，则使用相同名称创建两个变量是没有意义的。const hideDeleteButton在useffect的回调范围内，不会干扰整个组件的本地状态。如果您是指使用其他变量名，这实际上取决于您，但这里没有逻辑问题。