Requisiten auf jeden Bildschirm verteilen

Question

Ich bekomme diese JSON-Antwort von API in React Native.

[ 
    { 
     "cloth_image": "https://ox0%3es", 
     "id": 7, 
     "big_cloth_type": "t" 
    }, 
    { 
     "cloth_image": "https://qM%3D&", 
     "id": 8, 
     "big_cloth_type": "t" 
    }, 
    { 
     "cloth_image": "https://qM%", 
     "id": 9, 
     "big_cloth_type": "o" 
    }, 
    { 
     "cloth_image": "https://qD&", 
     "id": 10, 
     "big_cloth_type": "s" 
    } 
] 

Diese obige Antwort wird als this.props.clothesList von Redux gespeichert.

Was ich tun möchte, ist, wenn die Objekte von big_cloth_type im Array t ist, möchte ich sie dem entsprechenden Bildschirm zuweisen. (In diesem Fall ist es TopScreen)

Von Code (Dies ist render() Funktion)

<View style={{flex: 1}}> 
     <Tabs initialPage={0}> 
      <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Tops</Text></TabHeading>}> 
      <TopScreen clothes={blahblah}/> <----- here I want to pass objects with 't' type to this Screen. 
      </Tab> 
      <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Outers</Text></TabHeading>}> 
      <OutwearScreen clothes={blahblah} /> <--- here the objects with 'o' 
      </Tab> 
      <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Bottoms</Text></TabHeading>}> 
      <BottomScreen /> 
      </Tab> 
      <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Shoes</Text></TabHeading>}> 
      <ShoeScreen /> 
      </Tab> 
      <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>ETC</Text></TabHeading>}> 
      <EtcScreen /> 
      </Tab> 
     </Tabs> 
     <FABs 
      active={this.state.active} 
     /> 
     </View> 

ich nicht mit einer Lösung aufwarten kann so weit. :(

Für den Vorschlag des Kommentars, ich bin Entsendung meine Minderer

export default function(state = INITIAL_STATE, action) { 
    switch (action.type) { 
    case CLOTHES_LIST_SUCCESS: 
     return { ...state, clothesList: action.payload } 
    case CLOTHES_LIST_FAIL: 
     return { ...state, } 
    default: 
     return state; 
    } 
} 

Answer 1

Angenommen, Sie mit redux einen Container/Komponentenansatz verwenden, wäre es besser, auf der API-Antwort zu handeln, in der Behälter und als Requisiten an die Komponente zu übergeben

Für zB:

let getTrousers = (data) =>{ 
    return data.filter((item) => { item. big_cloth_type === 't') }) 
} 

const mapStateToProps = (state,ownprops) => { 
    let apiresponse = state.clothesList; 
    let trousers = getTrousers(apiresponse); 
    /*do similarly for different cloth types*/ 

    return { 
    trousers, 
    shoes, 
    outerwear, 
    tops 

    } 

} 

Exportstandard connec t (mapStateToProps) (ClothesComponent)

Jetzt in Ihrem ClothesComponent, wie zuvor beschrieben hatte können Sie

<View style={{flex: 1}}> 
     <Tabs initialPage={0}> 
      <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Tops</Text></TabHeading>}> 
      <TopScreen clothes={this.props.tops}/> <----- here I want to pass objects with 't' type to this Screen. 
      </Tab> 
      <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Outers</Text></TabHeading>}> 
      <OutwearScreen clothes={this.props.outerwear} /> <--- here the objects with 'o' 
      </Tab> 
      <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Bottoms</Text></TabHeading>}> 
      <BottomScreen /> 
      </Tab> 
      <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>Shoes</Text></TabHeading>}> 
      <ShoeScreen /> 
      </Tab> 
      <Tab heading={<TabHeading><Text style={styles.tabHeadingStyle}>ETC</Text></TabHeading>}> 
      <EtcScreen /> 
      </Tab> 
     </Tabs> 
     <FABs 
      active={this.state.active} 
     /> 
     </View> 

Ihre Datenmanipulation in dem Behälter tun, statt die Komponente es Vorteile hat. In erster Linie hält es Ihre Komponente "doof", d. H. Es führt nur das Rendern mit den gegebenen Daten durch und nichts anderes.

Ich würde empfehlen zu lesen React with Redux und smart vs dumb components by Dan. Dies sollte eine Menge Dinge klären!

Answer 2

Ich denke, was Sie tun können, ist das Array entweder auf dem Minderer zu filtern, wenn Sie es speichern möchten oder vor dem Rendern wie

const filteredList = this.props.clothesList.filter((item) => item.big_cloth_type === "t")) 

können Sie diese Liste verwenden, die gefiltert, um anzuzeigen, wie Sie

UPDATE wollte. Ein Beispiel hier die Filter mit der Funktion auf render Was Hier ist es wichtig zu beachten, dass der Schlüsselparameter auf die Komponente angewendet wird, die das übergeordnete Element jedes Elements ist. React verwendet den Schlüsselparameter, um aus dem Schatten-DOM zu entscheiden, ob das Element geändert werden muss.

Sie können weitere Informationen über sie auf dem Original facebook finden reagieren Seite here

render() { 

    const filteredList = this.props.clothesList.filter((item) => item.big_cloth_type === "t")) 

    return (
     <View> 
      {filteredList.map((item) => (
       <Text key={item.id}>item.name</Text> 
      ))} 
     </View> 
    ); 

}