antd mobile 主动刷新页面

在 Ant Design Mobile 中，可以通过使用 useState 钩子来实现页面的主动刷新。首先，导入 useState 和 Button 组件：

import React, { useState } from 'react';
import { Button } from 'antd-mobile';

然后，创建一个状态变量 refresh 和一个更新该变量的函数 setRefresh：

const [refresh, setRefresh] = useState(false);

接下来，在需要刷新的地方使用 refresh 状态变量来控制页面的显示。例如，可以在一个列表组件中使用 refresh 来刷新列表数据：

const ListComponent = () => {
  const [listData, setListData] = useState([]);

  // 根据 refresh 变量刷新列表数据
  useEffect(() => {
    if (refresh) {
      // 调用接口或执行其他刷新操作
      // ...

      // 更新列表数据
      setListData(newListData);

      // 刷新完成后重置 refresh 变量为 false
      setRefresh(false);
    }
  }, [refresh]);

  return (
    <div>
      {/* 列表内容 */}
      {listData.map(item => (
        // ...
      ))}

      {/* 刷新按钮 */}
      <Button onClick={() => setRefresh(true)}>刷新</Button>
    </div>
  );
};

在上述代码中，当点击刷新按钮时，会将 refresh 变量设置为 true，从而触发 useEffect 钩子中的刷新操作。刷新完成后，会将 refresh 变量重置为 false，以便下次手动触发刷新。

这样，当点击刷新按钮时，页面就会主动刷新