react，如何实现：先成功传递出最新的filters数据，而后再向数据库获取经过最新的ftilters数据？

Question

在使用的react版本如下：

已写的代码：

import React, { useEffect, useState } from 'react'
function HouseList() {
// ...
  const [filters, setFilters]  = useState({})
  const searchHouseList = async (value) => {
    await API.get('/houses', {
      params: {
        cityId: value,
        ...filters,
        start: 1,
        end: 20
      }
    }).then(res => {
      console.log(filters)
// ...
    })
  }
  const onFilter = filters => {
    setFilters(filters)
  }
// ...

return (
// ...
)
}
export default HouseList

代码里的filters是经过筛选后的数据，目前效果是，第一次拿不到filters数据，第二次拿到的是第一次ftilters数据，后面每次拿到的都是前一次ftilters数据

请问如何修改代码，才能实现先成功传递出最新的filters数据，而后再向数据库获取最新的filters数据，即第一次就成功获取到想要的数据？
请在现有代码基础上展示举例说明，谢谢

Answer 1

你可以使用useEffect来实现这个功能。useEffect是一个React hook，它允许你在组件渲染后执行副作用（例如数据获取）。

你可以使用useEffect来监听filters的变化，并在其发生变化时执行数据获取。

---

首先，你需要导入useEffect：

import { useEffect } from 'react'

然后，你可以在HouseList函数内使用useEffect：

useEffect(() => {
  searchHouseList(value)
}, [filters])

这段代码会在filters发生变化时调用searchHouseList函数。

---

你还可以将useEffect的第二个参数设置为一个数组，表示只有在这个数组内的值发生变化时才会触发useEffect。例如，如果你希望只在cityId发生变化时才调用searchHouseList，你可以将第二个参数设置为[cityId]。

---

完整代码如下：

import React, { useEffect, useState } from 'react'

function HouseList() {
  const [filters, setFilters]  = useState({})
  const searchHouseList = async (value) => {
    await API.get('/houses', {
      params: {
        cityId: value,
        ...filters,
        start: 1,
        end: 20
      }
    }).then(res => {
      console.log(filters)
// ...
    })
  }
  const onFilter = filters => {
    setFilters(filters)
  }

  useEffect(() => {
    searchHouseList(value)
  }, [filters])

  return (
// ...
  )
}

export default HouseList