Question

我想拥有一个控制选择的钩子，但是其初始状态可以通过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设置一个异步initialState

我觉得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>
  )
}

UseState initialState基于异步值

1 个答案: