Antd Popover调用setState后需点击两次才显示的问题求助

我用React.js编写了以下代码，原本期望在Antd Popover显示时更新data状态，但在打开Popover时调用setData后，必须点击两次按钮才能让Popover显示，求合适的解决办法？

页面组件 #

function Page(){
  const userList = ...;
  const [data, setData] = useState();
  return (
    <>
      <UserList users={userList} setData={setData} />
      <div>{data}</div>
    </>
  )
}

用户列表组件 #

function UserList({ users, setData }) {
  return (
    <>
      {users.map((user) => <Item key={user.id} user={user} setData={setData} />)}
    </>
  )
}

条目组件 #

function Item({ user, setData }) {
  const [open, setOpen] = useState(false)
  
  const handlePopover = useCallback((newOpen) => {
    // 我也曾尝试添加类似if (open)的判断
    setData(user);
    setOpen(newOpen);
  }, [setOpen, setData, user, open]);
  
  return (
    <Popover
      open={open}
      setOpen={handleOpenChange}
      content={<div>{user}</div>}
      openButton={<div>click me!</div>}
    />
  )
}

弹出框组件（Antd封装） #

import { Popover as AntdPopover, ConfigProvider } from 'antd';

function Popover({ open, setOpen, content, openButton, title = '' }) {
  const handleOpenChange = (newOpen) => {
    setOpen(newOpen);
  };

  return (
    <ConfigProvider
      theme={{
        token: {
          sizePopupArrow: 0,
        },
      }}
    >
      <AntdPopover
        content={content}
        title={title}
        trigger="click"
        open={open}
        onOpenChange={handleOpenChange}
        destroyTooltipOnHide
      >
        {openButton}
      </AntdPopover>
    </ConfigProvider>
  );
}

解决方法 #

1. 修正回调引用错误 #

原Item组件里定义了handlePopover回调，但传给Popover组件的setOpen属性却写了handleOpenChange——而Item内部根本没定义这个函数，这会直接导致Popover的状态无法正确更新，是点击两次才能生效的核心原因之一。先把这个错误修正：

// Item组件中修改return部分的Popover属性
return (
  <Popover
    open={open}
    setOpen={handlePopover} // 把handleOpenChange改成handlePopover
    content={<div>{user}</div>}
    openButton={<div>click me!</div>}
  />
)

2. 调整状态更新逻辑 #

把setData放在setOpen之后，并且只在Popover打开时才更新data，同时移除handlePopover依赖中的open（不需要用到当前open状态，减少不必要的回调重建）：

const handlePopover = useCallback((newOpen) => {
  setOpen(newOpen);
  // 仅当Popover打开时更新data
  if (newOpen) {
    setData(user);
  }
}, [setOpen, setData, user]);

3. 优化组件重渲染 #

• 给UserList中map生成的Item添加唯一key（比如user.id），避免React列表渲染的状态混乱和性能问题；
• 用React.memo包裹Item组件，避免父组件（Page）因data更新导致所有Item无意义重渲染：

const Item = React.memo(({ user, setData }) => {
  // 内部代码保持不变
})

4. 分离状态更新逻辑（可选方案） #

如果还是存在状态同步问题，可以改用useEffect监听Popover的open状态，当Popover打开时再更新data，彻底分离两个状态的更新逻辑：

function Item({ user, setData }) {
  const [open, setOpen] = useState(false)
  
  useEffect(() => {
    if (open) {
      setData(user);
    }
  }, [open, user, setData]);

  const handlePopover = useCallback((newOpen) => {
    setOpen(newOpen);
  }, [setOpen]);

  return (
    <Popover
      open={open}
      setOpen={handlePopover}
      content={<div>{user}</div>}
      openButton={<div>click me!</div>}
    />
  )
}

内容的提问来源于stack exchange，提问作者hireactbot