如何在导入函数中使用更高级别的 useState

Question

以下代码（为简洁起见删除了其中的某些部分）正在运行：

function AddressInputList({

  isOpen,

  inputValue,

  highlightedIndex,

  getItemProps,

  getMenuProps

}: AutocompleteInputListProps) {

  const [items, setItems] = useState<MarkerPoint[]>([])

  const api = 'XXXX'

  const fetchURL = `https://api.opencagedata.com/geocode/v1/json?key=${api}&q=${inputValue}&limit=5&pretty=1`

  useEffect(() => {

    async function fetchData() {

      if (inputValue !== null && inputValue.length > 1) {

        try {

          const request = await axios.get(fetchURL)

          const items = request.data.results.map((res: any) => {

            return {

              lat: res.geometry.lat,

              lng: res.geometry.lng,

              address: res.formatted

            }

          })

          setItems(items)

        } catch (error) {

          console.error(error)

        }

      }

    }

    fetchData()

  }, [inputValue])

  return (/*Code cut out*/)

}

我现在想做的是重构代码，让它更精简。因此，我将创建一个utility.ts-file，其中包含 -function fetchData，随后我想将fetchData-function 导入初始AddressInputList-function：

实用程序.ts：

export async function fetchData(inputValue: string, fetchURL: string) {

  if (inputValue !== null && inputValue.length > 1) {

    try {

      const request = await axios.get(fetchURL)

      const items = request.data.results.map((res: any) => {

        return {

          lat: res.geometry.lat,

          lng: res.geometry.lng,

          address: res.formatted

        }

      })

      setItems(items)

    } catch (error) {

      console.error(error)

    }

  }

}

现在我的问题是我不知道如何使 useState-hooksetItems在utility.ts. 我在某处读到可以做到这一点props，但我不确定这会是什么样子。一个简短的例子将不胜感激！

Answer 1

只需创建一个自定义挂钩即可为您获取数据。我不建议把这个钩子绑inputValue那么多。此外，.map 格式也不通用。export function useFetchData(inputValue: string, fetchURL: string) {&nbsp; const [items,setItems] = useState([]);&nbsp; useEffect(() => {&nbsp; &nbsp; async function fetchData() {&nbsp; &nbsp; &nbsp; if (inputValue !== null && inputValue.length > 1) {&nbsp; &nbsp; &nbsp; &nbsp; try {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const request = await axios.get(fetchURL)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const items = request.data.results.map((res: any) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lat: res.geometry.lat,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lng: res.geometry.lng,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; address: res.formatted&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setItems(items)&nbsp; &nbsp; &nbsp; &nbsp; } catch (error) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.error(error)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }, [inputValue]);&nbsp; return items;}之后你可以像这样使用这个自定义钩子const items = useFetchData(inputValue, "/api/<endpoint>);

Answer 2

我想您可以将 setItems 作为回调函数作为参数传递给您的 fetchData 函数。fetchData(inputValue:&nbsp;string,&nbsp;fetchURL:&nbsp;string,&nbsp;setItems)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;... }