reactjs - Redux does not delete some UI items after state update

Question

I am having such an issue when there are two modes of presenting UI elements in Redux. When switching between them one element is left off from one mode each time the mode switched back and forth (using a toggle). Here is the main UI that I have:

const Variants = React.memo(({ variants, ...props }) => (
  <Grid stackable divided="vertically" columns="equal">
    {variants.map(variant => (Array.isArray(variant) ?
      <CompoundHets variants={variant} key={`${variant.map(v => v.variantId).join()}-${variant[0].familyGuids.join('-')}`} {...props} /> :
      <Variant variant={variant} key={`${variant.variantId}-${variant.familyGuids.join('-')}`} {...props} />
    ))} 
  </Grid>
))

Variants.propTypes = { 
  variants: PropTypes.array,
}

export default Variants

So, variants can be just an array of objects or an array of arrays and these two cases correspond to two different modes switched by the check - Array.isArray(variant). So, what happens is:

1. Initially CompoundHets component gets rendered correctly (array of arrays case)
2. Switching the mode (passing different variants parameter) leaves off 1 CompoundHets and renders all of the Variant components
3. Repeating 1 and 2 leaves off now 2 CompoundHets.

I have no idea why it's behaving like that since I checked and variants is passed off perfectly correct type each time and the state does update with the correct data. And no matter what I have inside Variant or CompoundHets it should draw one or the other not leaving the traces of one or the other.

For further reference if anyone is interested to dig into CompoundHets or Variant elements:

https://github.com/broadinstitute/seqr/blob/master/ui/shared/components/panel/variants/Variants.jsx

Answer 1

等待大神解答