Checkbox-Status ändert sich nicht basierend auf Redux-Status

Question

Ich habe eine dumme Komponente, die eine Reihe von Objekten aufnimmt und eine Checkboxes rendert. Die stumme Komponente etwa wie folgt aussieht:

// imports 

const FilterList = ({ filterTitle, filters, onFilterChange }) => { 
    console.log(`FILTERS: ${JSON.stringify(filters)}`); 
    return (
    <div> 
     <Header colorIndex="light-2" size="small"> 
     <Label margin="none"> 
      {filterTitle} 
     </Label> 
     </Header> 
     <List> 
     <ListItem direction="column" align="start"> 
      {filters && 
      filters.map(filter => { 
       console.log(filter); 
       return (
       <CheckBox 
        key={filter.name} 
        label={filter.name} 
        value={filter.name} 
        checked={filter.checked} 
        onChange={onFilterChange} 
       /> 
      ); 
      })} 
     </ListItem> 
     </List> 
    </div> 
); 
}; 

FilterList.propTypes = { 
    ..... 
}; 

export default FilterList; 

Nun wird die filters ist ein Array von Objekten, die etwa wie folgt aussieht:

export const find = [ 
    { 
    type: 'find', 
    name: 'Apartment', 
    searchType: 'text', 
    checked: false, 
    }, 
    { 
    type: 'find', 
    name: 'Assisted Living', 
    searchType: 'text', 
    checked: false, 
    } 
]; 

Jetzt habe ich einen Behälter, der das onChange Ereignis der Ankreuzfelder Griffe und schaltet ihren checked Zustand entsprechend um. Jetzt handle ich das onChange Ereignis korrekt, da ich die checked Eigenschaft, die true oder false ist, in dem Anwendungsstatus korrekt widerspiegelt.

Ich verstehe nicht, was passiert, aber die Änderungen im Speicher werden nicht reflektiert oder an die dumme Komponente weitergegeben und die Kontrollkästchen ändern den Status überhaupt nicht.

Hier sind Links zu meinen Behälter, Aktionen und Minderer-Datei:

1) Container: https://gist.github.com/ghoshabhi/ba0feafdb58535150335f6d847e4f562

2) Aktionen: https://gist.github.com/ghoshabhi/eadec3dd7701afeaac72fd8afb71b94a

3) Reducer: https://gist.github.com/ghoshabhi/7233e7d5143c4b9d8108c5ebb936d60c

---

Jede Hilfe oder Vorschläge oder alternative Methoden dazu sind willkommen.

Vielen Dank!

Answer 1

Nun, Ihr Problem bezieht sich nicht auf reagieren oder redux, sondern auf HTML. Wenn Sie ein geprüftes Attribut mit einem beliebigen Wert einschließlich false angeben, wird es überprüft. Wenn Ihr Kontrollkästchen also nicht aktiviert ist, müssen Sie das Attribut checked vollständig auslassen.

See: this answer for more details