Javascript 传递到React函数后参数未定义？

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

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

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

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

refreshMatchStatus={this.props.refreshMatchStatus} 

this.props.refreshMatchStatus(match_id, status)

由于某些原因，参数

match_id

和

status

在传递时是

undefined

如果在challengepop组件中调用函数前一行执行

console.log

，则

match\u id

将返回正确的id号。但是当我们在refreshMatchStatus函数的第一行执行

console.log

时，

match\u id

返回

undefined

---

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

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

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

---

然后可以删除渲染方法中的

.bind

调用，否则，由于它是父组件，每次触发新的渲染时，都会重置方法绑定，我相信这会导致子级参数丢失。

您应该显示包含

的组件代码。您可以发布所有相关组件/函数的完整代码吗？我过去也遇到过同样的问题，我所做的是在子组件中为道具设置一个默认值，我的问题得到了意外解决。事实上，我相信您根本不需要绑定，因为

refreshMatchStatus

是一个箭头函数，它将始终在定义它的上下文中被调用。在没有添加到此处的过程中，您一定在代码中的任何地方遗漏了一个问题。这是不可复制的。将绑定移动到构造函数是一个好主意，但我看不出这会如何导致参数丢失。问题的底部是“我们怀疑它可能与绑定有关”，所以我提供了另一种方法，让他们自己确定：）是的，是的，你的答案很有价值，只是好奇为什么/如何影响它！