如何防止componentWillUpdate導致無限循環？

我有一個HTML元素的子組件，它可以在點擊時從它的父函數中觸發一個回調。回調然後改變父組件的狀態。然後將更改後的狀態發回到在以下if語句條件中使用的父級。 toggle，來自父級的道具，然後調度改變商店中的值的操作。然而，這個派發最終會改變商店，因此也是父組件中的其中一個道具，也會傳遞給子組件。如何防止componentWillUpdate導致無限循環？

因此，當我將它插入到我的代碼中時，我得到一個無限循環。

/* no state changes to the current component */ 
    componentWillUpdate(nextProps) { 
    const { 
     // ... some props 
     toggle, // func 
    } = nextProps; 

    if (/* case 1 of 2*/) 
     toggle(true); 
    } else (/* case 2 of 2 */) { 
     toggle(false); 
    } 
    }

因爲onClick觸發，在這上面的if語句依賴父母的狀態改變字段的回調，我不得不放棄if語句中componentWillUpdate（或某些陣營API，我可以if語句執行一旦我確定父狀態的改變已經完成（相對於onClick功能調用）

我想在點擊後觸發上述操作，我不希望它無限循環，我該怎麼辦？

來源

2017-02-08 AlanH

我不想讓它循環無限。我怎樣才能做到這一點？

通過比較props到nextProps的值。所以你只需要在需要時切換。很難在不知道當前邏輯的情況下提供確切的代碼。

if (this.props.src !== nextProps.src) { 
    // toggle logic 
}

此外，你可能想這樣做的componentWillReceiveProps內代替，所以你不要有可能使您的切換已發生之前。

來源

2017-02-08 00:49:22 Jack

這是你的toggle在導致循環的狀態改變之後改變狀態而不是點擊。

您應該能夠修改影響toggle的邏輯的狀態屬性，這與onClick所處的狀態更改一致。

這樣做state已將其屬性設置正確，您只需執行toggle()的非狀態相關行爲。

來源

2017-02-08 00:30:56 Pineda

但是'onClick'觸發的函數也是一個回調（一個道具），它改變父狀態。因此，我不確定React是否會中斷onClick並繼續回調，或者是否會完成onClick中的其餘代碼（如果我將代碼與onClick配合使用）。 – AlanH

發佈代碼的其餘部分 – Pineda

「onClick」可以改變狀態。在這一點上_maybe_也可以添加'toggle（）'中包含的'state'變量（因爲該邏輯也依賴於'state'）。因此，當調用toggle時，它不會導致另一個「狀態」更改並打破無限循環。 – Pineda

如何防止componentWillUpdate導致無限循環？

回答

相關問題