It's All Writing.

Writing makes you happy.

How to avoid lightning aura:iteration's bug ( Rerendering child components in aura:iteration when parent attribute changed )

Environment

  • Lightning component

Prerequisites

aura:iteration has a bug as child components in aura:iteration is not re-rendered when parent attribute changed.
The example is shown as below.

gist.github.com

When a parent object (Contact) exists multiple records, the code moves well.
But after doing a rendering by more than one record once, when the number of records of a parent object is made a zero, an error occurs.
Because a parent object is empty, a programmer expects the code in aura:iteration to be never evaluated.
But in such the case, the code in aura:iteration is evaluated, and child component receive null attributes. It makes the error.

In the gone past, we seemed able to solve this error by surrounding child component with a span tag.

salesforce.stackexchange.com

But, this problem isn't solved by this way now.

Solution

The solution is using the way of Dynamically Creating Components.

developer.salesforce.com

The example is shown as below.

gist.github.com

ContactItems component is a wrapper component which wraps ComponentItem and aura:iteration.

Reference

developer.salesforce.com

salesforce.stackexchange.com