Raycast 中文文档
  • 介绍
  • 链接
    • 官网
    • 官网 API 文档
    • 社区
    • GitHub
    • Store
    • Icon 生成器
    • 扩展图标模板
  • 基础
    • 起步
    • 创建您的第一个扩展
    • 贡献一个扩展
    • 过审一个扩展
    • 发布一个扩展
    • 调试一个扩展
    • 安装一个扩展
  • 团队
    • 开始
    • 发布私人扩展
    • 协作开发私有扩展
  • 例子
    • Doppler 共享 Secrets
    • Hacker News
    • Todo 列表
    • Spotify Controls
  • 资料
    • 最佳实践
    • 工具
      • CLI
      • ESLint
      • VS Code(社区工具)
    • 文件结构
    • 生命周期
      • 参数
      • 后台刷新
      • Deeplinks
    • Manifest
    • 安全性
    • 术语
    • 版本控制
  • API 参考
    • AI
    • Cache
    • Command
    • Clipboard
    • Environment
    • Feedback
      • Alert
      • HUD
      • Toast
    • Keyboard
    • Menu Bar Commands
    • OAuth
    • Preferences
    • Storage
    • System Utilities
    • 用户界面
      • Action Panel
      • Actions
      • Detail
      • Form
      • List
      • Grid
      • Colors
      • Icons & Images
      • Navigation
    • 窗口 & 搜索栏
  • 公共包
    • 起步
    • 功能
      • 执行 AppleScript
    • 图标
      • getAvatarIcon
      • getFavicon
      • getProgressIcon
    • React hooks
      • useCachedState
      • usePromise
      • useCachedPromise
      • useFetch
      • useForm
      • useExec
      • useSQL
      • useAI
  • 迁移
  • FAQ
由 GitBook 提供支持
在本页
  • 签名
  • 参数
  • 例子
  1. 公共包
  2. React hooks

useCachedState

返回一个有状态值的钩子,以及一个更新它的函数。它类似于 React 的 useState,但该值将在命令运行之间保留。

该值需要是 JSON 可序列化的。

签名

function useCachedState<T>(
  key: string,
  initialState?: T,
  config?: {
    cacheNamespace?: string;
  }
): [T, (newState: T | ((prevState: T) => T)) => void];

参数

  • key 是 state 的唯一标识符。这可用于跨组件 和/或 命令共享状态(使用相同密钥的钩子将共享相同的状态,例如更新一个将更新其他)。

有几个配置项:

  • 如果缓存中还没有任何状态,则 initialState 是状态的初始值。

  • config.cacheNamespace 是一个命名空间键的字符串。

例子

import { List, ActionPanel, Action } from "@raycast/api";
import { useCachedState } from "@raycast/utils";

export default function Command() {
  const [showDetails, setShowDetails] = useCachedState("show-details", false);

  return (
    <List
      isShowingDetail={showDetails}
      actions={
        <ActionPanel>
          <Action title={showDetails ? "Hide Details" : "Show Details"} onAction={() => setShowDetails((x) => !x)} />
        </ActionPanel>
      }
    >
      ...
    </List>
  );
}
上一页React hooks下一页usePromise

最后更新于1年前