Reagieren Redux Element nicht

Question

Aktualisieren einer Tabelle I Komponente haben, die Zeilen für Positionsliste rendert:

return <Row style={styles.row} key={idx} item={item} onSelect={this.props.onRowSelect}> 
    {columns.map((col, idx) => { 
     return <Column style={col.style} key={`${item._id}_${col.key}`} 
         width={col.width || this._defaultCellWidth} type={col.type}> 
      {_.get(item, col.key)} 
     </Column> 
    })} 
    </Row> 

Jedes Element hat selected:bool Wert, der auf jeder Zeile einem Ankreuzfeld binded wird.

Auch habe ich eine HeaderRow, die Kontrollkästchen für alle auswählen. Durch Aktivieren der Checkbox verschicke ich ein Ereignis, um das ausgewählte Feld zu aktualisieren. Der Status selbst wird aktualisiert, aber es gibt keinen neuen render. Meine Aktion ist:

if(action.id) 
{ 
    let index = state.items.findIndex(item => item._id == action.id); 
    state.items[index].selected = action.selected; 
} 
else 
{ 
    state.items.map(e=>e.selected = action.selected); 
} 

return 
{ 
    ...state, 
    items: state.items 
} 

EDIT: Ist das gute Lösung:

if(action.id) { 
      let index = state.items.findIndex(item => item._id == action.id); 
      state.items[index].selected = action.selected; 
      return { 
       ...state 
      } 

     }else{ 
      return { 
       ...state, 
       items: state.items.map((item, index) => { 
        return Object.assign({}, item, { 
         selected: action.selected 
        }) 
       }) 
      } 
     } 

Answer 1

Denken Sie daran, dass all data in the Redux store must be considered immutable ("[a reducer] must never mutate its arguments").

Sie mutieren die Einzelteile innerhalb state.items, und da items das gleiche Objekt bleibt, Redux hält es unverändert, so dass die Ansicht nicht aktualisiert wird.

Answer 2

Nur ein häufiger Fehler, der oft passiert. Werfen Sie einen Blick auf this article, wie es erklärt, wie Sie jede Art von Ebene sicher aktualisieren können.

In Ihrem Fall sollte es so etwas wie diese:

return 
{ 
    // Copy the current state 
    ...state, 
    // Replace the items array with a new version, 
    // by creating a new array through the map() call. 
    items: state.items.map((item, index) => { 
     // This isn't the item in the array we are looking 
     // for. So simply return it as is. 
     if(index != action.id) { 
      return item; 
     } 

     // This is the item to be changed. So copy it and 
     // overwrite the selected property. 
     return { 
      ...item, 
      selected: action.selected 
     }; 
    }); 
}