reactjs - UseState initialState 基于异步值

Question

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

这是我想要实现的行为:

组件通过异步调用api获取文档列表(result.value将在一段时间后设置)

可以在 url 中设置文档的 id，如果 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>
  )
}