レンダリング中に関数を呼び出せません。

Question

レンダリング内から関数を呼び出すことができません。私のコンポーネントは：

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); 

エラーはthisは予約語です。 Console.logは、配列内のすべてのユーザーを表示します。私は間違って何をしていますか？あなたは、中括弧は必要ありません

Answer 1

ジェームズエマノーンは非常に正しいです。

しかし、私があなただったら、何かがレンダリングされるかどうかを確認するロジックを移動します。

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> 
      ) 
     }); 
    ) 
}; 

そして、レンダリングがよりクリーンになり：

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

私は示唆しているもう一つのリファクタリングあなたはすでにあなたがのparamsを介してそれらを渡す必要はありませんthis.propsにユーザーを持っているので、ですので、あなたの関数で直接使用することができます。

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

この方法により、あなたがエラーを受信しませんが、もし：

あなたの関数をバインドする4あなたは、あなたが実際にそれが失われる可能性があるコンテキストに応じないことに反応した場合でも、も重要です実際に何かがレンダリングされているかどうかを評価しなければなりません。

Answer 2

：

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

Answer 3

それとも少し短いが、それらの中括弧を追加することで、あなたの代わりにあなたの希望JSXのオブジェクトの異なる戻り値の型を作成しました。あなたは、コンポーネントのコンストラクタでbindgetUsersFunction方法を忘れてしまった

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

Answer 4

：

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

あなたはconst { users } = this.props.users

をしましたが、あなたはconst { users } = this.props