基于异步值的 UseState 初始状态

Question

我想要一个控制 select 的钩子，但它的初始状态可以通过 url 和 api 调用来定义。

这是我想要实现的行为：

• 组件通过异步调用api获取文档列表（result.value仅在一段时间后才会设置）
• 文档的 id 可以在 url 中设置，如果 match 不为“false”，则 match.params.id 会提取它
• useState 控制选择，如果（在 api 调用之后）在 url 中定义了 id 并且在文档列表中找到了该 id，我希望将索引设置为该值

这是我尝试过的（当然它不起作用）：

const match = useRouteMatch('/document/:id') //react-router
const result = useAsync(api.getDocuments, []) //react-use
const [selectIndex, setSelectIndex] = useState(match && !(result.loading || result.error) && result.value.documents.findIndex(({_id}) => _id === match.params.id))

基本上我想要一个用于 useState 的异步初始状态

我觉得 useEffect 可能有用，但我仍然不知道如何使用它

Answer 1

使用 useEffect 和 useState 的组合来异步初始化一个值，您可以在 ui 上更改该值。

import { useEffect, useState } from 'react'
import { useRouteMatch } from 'react-router-dom'

const App = () => {
  const [value, setValue] = useState()
  
   const { params } = useRouteMatch('/document/:id')
  
  useEffect(() => {
    someAsyncStuff(params.id).then(data => setValue(data))
  }, [params])
  
  return (
    <select
      value={value}
      onChange={({target: { value }}) => setValue(value)}>
      <option value={1}>one</option>
      <option value={2}>two</option>   
    </select>
  )
}

Answer 2

顺便提一下，在 2022 年，如果您使用一些允许顶级等待的捆绑器，您可以读取组件外部的异步值，因此

import { useEffect, useState } from 'react'

const someValue = await getSomeValue();//<=this
const App = () => {
  const [value, setValue] = useState(someValue)
}