Reactjs 初始渲染时未设置useState的值

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

我有一个

priceToFilter

状态：

const [priceToFilter, setPriceToFilter] = useState(0)

最初设置为

0

，它在初始渲染时正确渲染

0

但问题是，我希望它的值是我使用

useffect

hook在初始渲染中获取的数组的长度

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

因此，在这个函数中，我试图访问priceToFilter，但它返回

0

，因为这是它的初始值

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

---

您需要添加第二个

useffect

来收听价格更新，然后相应地过滤结果：

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

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

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

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

返回结果
.filter（x=>x.stars是有意义的，在解析
setPriceToFilter
之前，您正在运行
filterResults
。更新状态后，您可能应该在
useffect
外部运行它。在状态中保留一个布尔值作为标志（或使用数据可用性本身）以防止过滤（或渲染）直到获取数据。
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>);