如何在反应中调用道具箭头功能

Question

我是一名 React 开发新手。我有一个带有 UpdateUsers props 函数的组件，它在主组件中调用：

主要成分：

UpdateUsers = () => {...}
 render(){
   return(
     <User UpdateUsers = {this.UpdateUsers} />
  )}

在用户组件中，我无法正确调用UpdateUsers函数。

用户：

addUser = () => {
   //do some other things
   //code for adding user
   this.props.UpdateUsers();
}

render(){
   return(
     //do some other things
     <Button onClick={this.addUser}>ADD<Button/>
  )}

我在addUser中调用的this.props.UpdateUsers();没有用。如果我在按钮 OnCkick 中调用它，它就会起作用。但在 ddUser 中调用它无法正常工作。

如何在 addUser 函数中调用 this.props.UpdateUsers？

Answer 1

我不确定是什么问题，因为我看不到 Main 和 User 组件的完整代码。如果你告诉我更多有关你的问题的信息，那将会很有帮助。

如果 UpdateUsers 在您单击按钮后没有被调用，下面的代码可以解决它，但如果它被调用但没有达到您的预期，那么我需要了解更多关于您的问题。

class User extends Component {
  addUser = () => {
    this.props.addUser();
  }
  
  render() {
    return (
      <button onClick={this.addUser}>
        Add user
      </button>
    );
  }
}

class Main extends Component {
  addUser = () => {
    // do something here 
  }

  render() {
    return <User addUser={this.addUser} />;
  }
}

Answer 2

看看这个解决方案； 您可以在将方法作为道具发送时使用 .bind。

Answer 3

我意识到某些功能需要时间才能运行。

在这种情况下，在UpdateUsers之前添加用户是一个耗时的功能。 UpdateUsers 无法在列表中显示新用户（我添加的）的原因，并在添加另一个用户后显示，是时间问题！

我们可以通过像这样定义 async 函数来解决这个问题：

在用户组件中：

addUser = async () => {
   //do some other things
   await //code for adding user
   this.props.UpdateUsers();
}

render(){
   return(
     //do some other things
     <Button onClick={this.addUser}>ADD<Button/>
  )}

如何在反应中调用道具箭头功能

How to call props arrow function in react

reactjs

arrow-functions