初始渲染时未设置useState的值

Question

我开始使用钩子，我遇到了一个问题。

我有一个priceToFilter状态：

const [priceToFilter, setPriceToFilter] = useState(0)

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

但问题是，我希望它的值是我使用useffecthook在初始渲染中获取的数组的长度

但是我不知道阵列的长度，直到组件安装完毕。

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

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

但是，如果您在使用效果中看到，我将通过setPriceToFilter函数将priceToFilter设置为另一个值。但是，当use效应发生在初始化挂载之后时，它不会获得新值，而是保持为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

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

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>);