Question

我开始使用Hooks，但是遇到了问题。

我有这个priceToFilter状态：

const [priceToFilter, setPriceToFilter] = useState(0)

最初设置为0，它将在初始渲染中正确渲染0。

但是事实是，我希望它的值是我使用useEffect钩子在初始渲染中获取的数组的长度

但是我不知道该阵列的长度，直到组件安装好为止。

因此，在此函数中，我尝试访问priceToFilter，但是它返回0，因为这是它的初始值。

  function filterResutls() {
    setFilteredResults(results.filter(x =>  {
      return x.stars <= stars && x.price <= priceToFilter
    }))
  }

但是，如果您在useEffect中看到，我是通过priceToFilter函数将setPriceToFilter设置为另一个值。但是，由于useEffect发生在初始安装之后，因此它没有获得新的值，而是保持为0。

关于如何在第一个渲染器上获取priceToFilter的更新值的任何想法？

  useEffect(() => {
    fetchHotels(endpoint)
      .then( data => {
        setFilteredResults(data)
        setresults(data)
        const max = Math.max.apply(Math, data.map((x) => x.price ))
        setMaxPrice(max)
        setPriceToFilter(max)
        filterResutls()
      })
      .catch(e => console.log('MAKE SOMETHING IN UI', e))
    }, [endpoint])

Answer 1

您需要添加第二个useEffect来收听价格更新，然后相应地过滤结果：

useEffect(() => {
  function filterResutls() {
    setFilteredResults(results.filter(x =>  {
      return x.stars <= stars && x.price <= priceToFilter
    }))
  }

  filterResults();
}, [priceToFilter, stars])

相关功能也应从第一个挂钩中删除：

useEffect(() => {
    fetchHotels(endpoint)
      .then( data => {
        setresults(data)
        const max = Math.max.apply(Math, data.map((x) => x.price ))
        setMaxPrice(max)
        setPriceToFilter(max)
      })
      .catch(e => console.log('MAKE SOMETHING IN UI', e))
    }, [endpoint])

一种更可靠的方法是不将过滤后的数据存储在状态上，而是在渲染期间将其导出：

 return results
      .filter(x => x.stars <= stars && x.price <= priceToFilter)
      .map(result => <p>Price: {result.price}</p>);

初始渲染时未设置useState的值

1 个答案: