Question

我是新手反应开发人员。我有一个带有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/>
  )}

在this.props.UpdateUsers();中调用的addUser不起作用。如果我在按钮OnCkick中调用它，它将起作用。但以ddUser的剂量调用无法正常工作。

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

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

看看这个解决方案； https://stackoverflow.com/questions/63302124/call-a-method-passed-as-a-prop-in-react 在将方法作为道具发送时，可以使用.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/>
  )}

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

3 个答案: