同步回放钩

同步写入反应钩

尝试为 OpenAI Whisper API 使用Whisper a React hook

https://github.com/cungsokdara/use-whisper 页面存档备份,存于互联网档案馆

• 安装

npm i @chengsokdara/react-hooks-async

yarn add @chengsokdara/react-hooks-async

• 使用量

• 调用回声同步

import { useCallbackAsync } from '@chengsokdara/react-hooks-async'

const App = () => {
  const sampleCallback = useCallbackAsync(
    // will be wrapped in try catch
    async () => {
      await promiseFunction()
    },
    // Optional: catch error
    (err) => {
      console.error(err)
    },
    // dependency list
    []
  )

  return (
    <div>
      <button onClick={() => sampleCallback()}>Fire</button>
    </div>
  )
}

• 使用效果

import { useEffectAsync } from '@chengsokdara/react-hooks-async'
import { useState } from 'react'

const App = () => {
  const [state, setState] = useState<boolean>(false)

  useEffectAsync(
    // will be wrapped in try catch
    async () => {
      const response = await callBackend()
      setState(result.data)
    },
    // Optional: cleanup function when component unmounted
    () => {
      setState(undefined)
    },
    // Optional: catch error
    (err) => {
      console.error(err)
    },
    // dependency list
    []
  )

  return (
    <div>
      <p>
        <b>State:</b> {state}
      </p>
    </div>
  )
}

• 使用MemoAsync

import { useMemoAsync } from '@chengsokdara/react-hooks-async'

const App = () => {
  const memoizedValue = useMemoAsync(
    // will be wrapped in try catch
    async () => {
      const response = await promiseFunction()
      return response + 1
    },
    // Optional: catch error
    (err) => {
      console.error(err)
    },
    // dependency list
    []
  )

  return (
    <div>
      <p>
        <b>Value:</b> {memoizedValue}
      </p>
    </div>
  )
}

• 路线图

  • 添加用户
  • 添加使用 Layout 效果
  • 添加使用模拟手表

使用 React 或 React Natural 联系我开发网络或移动应用程序
https://cungsokdara.github.io (英语)