Question

在Home组件中，我们想要调用一个函数：

     refreshMatchStatus = (match_id, status) => {
       console.log(match_id)
       var matches = this.state.matches
       matches.map(function(match){
         if (match.id == match_id){
           match.challenged = status
         }
       })
       this.setState({matches: matches})
     }

从Home渲染中，此函数将传递给下一个组件：

 <List refreshMatchStatus={this.refreshMatchStatus.bind(this)} showAlert={this.props.showAlert} user={this.state.user} token={this.state.token} matches={this.state.matches}/>

然后该函数向下传递一些组件，如下所示：

refreshMatchStatus={this.props.refreshMatchStatus}

当它到达ChallengePopup组件时，它的执行方式如下：

this.props.refreshMatchStatus(match_id, status)

由于某些原因，参数match_id和status在传递时为undefined。

如果我们在ChallengePopup组件中执行console.log，在调用函数前一行，match_id将返回正确的ID号。但是当我们在refreshMatchStatus函数的第一行执行console.log时，match_id会返回undefined。

我们怀疑这与bind（this）有关，但我们找不到任何方法以正确的方式传递参数。

Answer 1

将绑定调用移到构造函数，例如

constructor(props) {
    super(props);
    this.refreshMatchStatus = this.refreshMatchStatus.bind(this);
}

然后你可以在你的render方法中删除.bind调用，否则因为它是父组件，每次触发一个新的渲染时，方法绑定会被重置，我相信这会导致孩子丢失参数。

传递给React函数后，参数是否未定义？

1 个答案: