Аргументы не определены после перехода к функции React?
В компоненте Home мы хотим вызвать функцию:
refreshMatchStatus = (match_id, status) => {
console.info(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}/>
Затем функция передается через некоторые компоненты, например:
refreshMatchStatus = {this.props.refreshMatchStatus}
Когда он поступает в компонент ChallengePopup, он выполняется следующим образом:
this.props.refreshMatchStatus(match_id, status)
По какой-то причине аргументы match_id и status передаются как undefined.
Если мы выполним console.info в компоненте ChallengePopup, за одну строку до вызова функции, match_id вернет правильный номер идентификатора. Но когда мы выполняем console.info в первой строке функции refreshMatchStatus, match_id возвращает undefined.
Мы подозреваем, что это как-то связано с bind (this), но мы не можем найти способ передать аргументы правильным образом.
вы можете опубликовать полный код всех соответствующих компонентов / функций?
Я сталкивался с той же проблемой в прошлом, что я сделал для ее решения, так это установил значение по умолчанию в дочернем компоненте для реквизита, желаю неожиданно решить мою проблему
используйте используемую стрелочную функцию между ними при передаче этой функции вниз
На самом деле я считаю, что вам вообще не нужна привязка, поскольку refreshMatchStatus - это стрелочная функция, и она всегда будет вызываться с контекстом, в котором она была определена.
Вы, должно быть, пропустили проблему в своем коде где-либо на пути, который вы не добавляли здесь. Это не воспроизводится. См. Созданный мной минимальный пример codeandbox.
Не могли бы вы добавить полный код компонента ChallengePopup, который вызывает обработчик? Проблема не в предоставленном вами коде.
@RubenSerrate спасибо, что решили проблему! Если вы добавите это в качестве ответа, я могу принять это. Все еще сложно понять, когда мне нужно использовать функции привязки и стрелок
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Переместите вызов привязки в конструктор, например.
constructor(props) {
super(props);
this.refreshMatchStatus = this.refreshMatchStatus.bind(this);
}
Затем вы можете удалить вызов .bind в своем методе рендеринга, иначе, поскольку он является родительским компонентом, каждый раз, когда запускается новый рендеринг, привязка метода сбрасывается, что, как я считаю, может привести к потере аргументов от дочерних элементов.
Перемещение привязки к конструктору - хорошая идея, но я не понимаю, как это приведет к потере параметров.
В конце его вопроса говорится: «Мы подозреваем, что это может иметь какое-то отношение к привязке», поэтому я предлагаю альтернативный метод и позволяю им самим определить :)
Да, да, ваш ответ имеет ценность, просто любопытно, почему / как это повлияет!
Вы должны показать код компонента, который содержит
<List refreshMatchStatus = {this.refreshMatchStatus.bind(this)} ...>