为什么useEffect导致无限重新渲染？

Question

我有一个房间组件，当房间的过滤设置发生变化时，我想重新渲染它。同样的 useEffect 钩子是：

 useEffect(()=>{
        var items1=items.filter((item)=>{
            if(item.fields.price<=price)
            return item;
        })
        var items2=items1.filter((item)=>{
            if(item.fields.breakfast==breakfast)
            return item;
        })
        var items3=items2.filter((item)=>{
            if(item.fields.pets==petsAllowed)
            return item;
        })
        var items4=items3.filter((item)=>{
            if(item.fields.capacity<=capacity)
            return item;
        })
        filteredRooms=items4;
        if(items4.length!=items.length)
        setFilteredRooms(items4);
    })

我没有添加filteredRooms 作为依赖，但它仍然导致无限重新渲染。

Answer 1

当使用没有依赖数组的 useEffect 时，只要某些状态发生变化，就会执行它。 并且您的数组比较if(items4!=items)总是返回true 。 所以状态总是更新的。 这会生成循环。

尝试类似：

 useEffect(()=>{
    var items1=items.filter((item)=>{
        if(item.fields.price<=price)
        return item;
    })
    var items2=items1.filter((item)=>{
        if(item.fields.breakfast==breakfast)
        return item;
    })
    var items3=items2.filter((item)=>{
        if(item.fields.pets==petsAllowed)
        return item;
    })
    var items4=items3.filter((item)=>{
        if(item.fields.capacity<=capacity)
        return item;
    })
    filteredRooms=items4;
    if(items4.equals(items))
    setFilteredRooms(items4);
},[])

Answer 2

我有一个房间组件，当房间的过滤设置发生变化时，我想重新渲染它。

可能没有理由将过滤后的数组存储在状态中。 相反，您应该使用useMemo ，但如果items很小，您也可以直接在渲染函数中计算过滤后的数组。

也不需要多次调用.filter ，一次就足够了。

const filteredRooms = useMemo(
  () => items.filter(
    ({fields}) => fields.price === price && 
                  fields.breakfast === breakfast &&
                  fields.pets === petsAllowed &&
                  fields.capacity <= capacity
  ),
  [items, price, breakfast, petsAllowed, capacity]
)
// use filteredRooms as needed

每当items 、 price 、 breakfast 、 petsAllowed或capacity发生变化时，这将更新filteredRooms 。