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

或者更短一些，通过添加这些花括号，您创建了一个不同的返回类型的对象，而不是您想要的jsx。

event_acc.Tags()['distributions']

Answer 2

你不需要大括号：

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

Answer 3

您忘记了组件构造函数中的bind getUsersFunction方法：

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 4

James Emanon 非常正确。

但如果我是你，我会移动逻辑来检查是否有东西要渲染到函数本身。

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

然后，Render变得更加清洁：

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

我建议的另一个重构是，因为你已经在this.props中拥有用户，所以你不需要通过params传递它们，所以你可以直接在你的函数中使用它。 / p>

绑定你的函数也很重要，即使你做出反应的时候也会这么做，这取决于你实际可能丢失的上下文：

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

通过这种方式你不会收到错误，但如果你不能渲染那么用户，你将不得不开始评估是否真的要渲染。

Answer 5

你做了const { users } = this.props.users

但您应该const { users } = this.props

在渲染中调用函数不起作用

5 个答案: