為什么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 。