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

【问题标题】：Calling function in render not working在渲染中调用函数不起作用
【发布时间】：2018-02-24 22:41:32
【问题描述】：

无法从渲染中调用函数。我的组件是：

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 将所有用户播种在一个数组中。我做错了什么？

【问题讨论】：

getUsersfunction 目前没有返回任何东西。您可能需要添加一个 return 语句。
更新问题。这是我的错误。原始代码有回报。仍然没有返回任何内容。但是控制台日志"i was called"

标签： reactjs react-native ecmascript-6 react-redux

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

你不需要花括号：

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

【讨论】：

要清楚；花括号表示您何时要将 JS 插入 JSX 上下文中。但是一旦你已经在一个 JS 上下文中，大括号就代表一个 JSON 对象。原始代码返回一个 JSON 对象，该对象试图设置名称为 this.getUsersfunction(users) 的变量，这显然不起作用。
试过了。没有错误，但没有返回任何内容。但是控制台日志"i was called"。更新了相关功能。谢谢。
您需要从返回中移除控制台。把console.log语句放在return上面

【解决方案3】：

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

然后，渲染变得更加清晰：

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

我建议的另一个重构是，由于 this.props 中已经有用户，因此您无需通过参数传递它们，因此您可以直接在函数中使用它。

绑定你的函数也很重要，即使当 react 做到这四个时，根据你实际所在的上下文，它可能会丢失：

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

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

【讨论】：

【解决方案4】：

你忘记了组件构造函数中的bindgetUsersFunction方法：

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

【讨论】：

【解决方案5】：

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

但你应该这样做const { users } = this.props

【讨论】：