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

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。

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

Answer 1

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

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

然后您可以在您的渲染方法中删除.bind 调用，否则由于它是父组件，每次触发新渲染时，方法绑定都会重置，我认为这会导致子级参数丢失。