强制反应组件在状态更改后重新渲染答案

【问题标题】：Force react component to re-render after state change强制反应组件在状态更改后重新渲染
【发布时间】：2023-03-22 06:50:02
【问题描述】：

我有下面的 JSX，它是 Box 内的一个弹出窗口。 isActive 是 Popover 采用的一个道具，它使 Popover 保持打开状态。现在在点击事件上，我正在尝试更新 isActive 的值以使其保持打开状态，但它没有发生。如何纠正？

const [open, setOpen] = React.useState(false);
<Box variant="light">
  <Popover
    id="myPopover"
    isActive={open}
    items={[
      {
        children: <Type weight="semibold">Popover Item</Type>
      },
      {
        children: <Type weight="semibold">Popover Item</Type>
      },
      {
        children: <Type weight="semibold">Popover Item</Type>,
        disabled: true
      },
      {
        children: <Type weight="semibold">Click Me</Type>,
        onClick: event => {
          console.log('Clicked', event);
          setOpen(true);
          
        }
      }
    ]}
    
  >
    <div>My Popover</div>
  </Popover>
</Box>;

【问题讨论】：

isActive={open}?你也应该有onClose 事件来将状态设置为false。
@DennisVash 我该怎么做？
什么意思？使用状态而不是硬编码isActive
@DennisVash 我的错，我已经更新了帖子中的代码，我正在从状态设置isActive，但 Popover 正在关闭。
可以分享一下Popover的实现吗？了解什么 onClick 事件附加到

标签： reactjs react-hooks setstate

【解决方案1】：

onClick 函数应该将open 状态从真切换为假，反之亦然。修复您的 onclick 功能如下

setOpen(!open);

【讨论】：

【解决方案2】：

import React, { useState, useCallback } from 'react';
import { render } from 'react-dom';
import Button from './button';

const App = () => {
const [open, setOpen] = useState(false);

const onClick = useCallback((e) => {
setOpen((prev) => !prev);
}, []);
 return (
  <div>
  {open && <div>show value of open: {open ? 'true' : 'false'} 
  </div>}
  <br/>
  <Button callbackClick={onClick} />
  </div>
  );};

【讨论】：

【解决方案3】：

您好，您的代码中的 isActive 始终为 false。你应该设置isActive={open}

试试这个例子

import React, { useState, useCallback } from 'react';

const Example = () => {
  const [open, setOpen] = useState(false);

  const togglePopover = useCallback(() => {
    setOpen=((prev) => !prev)
  }, []);
  
  return (
    <Box variant="light">
      <Popover
        id="myPopover"
        isActive={open}
        items={[
          {
            children: <Type weight="semibold">Popover Item</Type>
          },
          {
            children: <Type weight="semibold">Popover Item</Type>
          },
          {
            children: <Type weight="semibold">Popover Item</Type>,
            disabled: true
          },
          {
            children: <Type weight="semibold">Click Me</Type>,
            onClick: togglePopover
          }
        ]}

      >
        <div>My Popover</div>
      </Popover>
    </Box>;
  );
}

【讨论】：

在 setOpen=((prev) => !prev) 处获取 'setOpen' 是只读错误。
答案中的错字。应该是setOpen((prev) => !prev)