使用状态初始状态基于异步值

Question

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

这是我想要实现的行为：

• 该组件通过异步调用 api 来获取文档列表(result.value 仅在一段时间后设置)
• 可以在 url 中设置文档的 id，如果匹配不是"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))

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

我觉得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 年，如果您正在使用一些允许顶级 await 的捆绑器，您可以在组件外部读取异步值，因此

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