Aufruf der Funktion im Render funktioniert nicht

Question

Funktion kann nicht innerhalb von render aufgerufen werden. Meine Komponente ist:

class MyComp extends Component { 
    componentWillMount() { 
    this.props.getUsers(); 
    }; 

    getUsersfunction(users){ 
    return(
     console.log("i was called"); 
    users.map((user, idx) => { 
     return (
     <View key={idx}> 
      <Text style={styles.userNames}> ID: {user.id} - Name: {user.name} </Text> 
     </View> 
     ) 
     }); 
    ) 
    }; 


    render() { 
    console.log("USERS: ", this.props.users); 
    const { users } = this.props.users 

    return (
     <View style={styles.container}> 
     <ScrollView> 
      { users.length ? (
       {this.getUsersfunction(users)} // <= Is this the correct way? 
      ) : null } 
     </ScrollView> 
     </View> 
    ); 
    } 
} 

// mapStatetoProps and mapDispatchToProps here. 

export default connect(mapStateToProps, mapDispatchToProps) (MyComp); 

Fehler ist this ein reserviertes Wort ist. Console.log sät alle Benutzer in einem Array. Was mache ich falsch?

Answer 1

James Emanon ganz korrekt ist.

Aber wenn ich Sie wäre, würde ich die Logik verschieben, um zu überprüfen, ob es etwas zu rendern gibt oder nicht in der Funktion selbst.

getUsersfunction(){ 
    const { users } = this.props.users 

    if(!users) 
    return null; 

    return(
     console.log("i was called"); 
     users.map((user, idx) => { 
      return (
      <View key={idx}> 
       <Text style={styles.userNames}> ID: {user.id} - Name: {user.name} </Text> 
      </View> 
      ) 
     }); 
    ) 
}; 

Und dann Render wird viel sauberer:

<ScrollView> 
    {this.getUsersfunction()} 
</ScrollView> 

Ein weiterer refactor ich vorschlagen würde, ist, da Sie bereits Benutzer in this.props haben Sie brauchen, um sie nicht durch params passieren, so Sie können es direkt in Ihrer Funktion verwenden.

Ihre Funktion Bindung ist auch wichtig, auch wenn reagiert nicht, dass vier Sie, je nach Kontext, wo man tatsächlich ist es verloren gehen könnte:

constructor() { 
    this.getUsersFunction = this.getUsersFunction.bind(this) 
} 

Auf diese Weise werden Sie Fehler nicht erhalten, aber wenn Sie können dann Benutzer nicht rendern, Sie müssen anfangen zu bewerten, ob es wirklich etwas zu rendern gibt.

Answer 2

Sie brauchen nicht die geschweiften Klammern:

{ users.length ? (
    this.getUsersfunction(users) // Now it's correct 
) : null } 

Answer 3

Oder ein wenig kürzer, durch diese geschweiften Klammern hinzugefügt, erstellt man einen anderen Rückgabetyp Objekt statt den gewünschten jsx.

<ScrollView> 
    { users.length && this.getUsersfunction(users) } 
</ScrollView> 

Answer 4

Sie haben vergessen zu bindgetUsersFunction Methode im Konstruktor des Komponente:

constructor() { 
    this.getUsersFunction = this.getUsersFunction.bind(this) 
} 

render() { 
    const { users } = this.props.users 

    return (
    <View style={styles.container}> 
     <ScrollView> 
     { users.length && this.getUsersfunction(users) } 
     </ScrollView> 
    </View> 
) 
} 

Answer 5

haben Sie const { users } = this.props.users

aber Sie haben sollte const { users } = this.props