ReactJs: как отправить функцию как опору в цикле
Может ли кто-нибудь сказать мне, как я могу отправить функцию в цикл, я получил ошибку, если я отправлю ее прямо в цикл. есть ли способ отправить функцию в цикл и вызвать ее из функции
у меня есть CommentListItem.js, в котором я вызываю SubCommentListItem
<SubCommentListItem
key = {subcomment.id}
data = {subcomment}
parentid = {commentID}
updateComment = {(comment) => this.updateComment()}
user = {user} postid = {postid}
/>
и в SubCommentListItem я вызываю компонент формы
{this.state.showForm ? (<CommentForm updateComment = {this.updateComment} class = {'subCommentFormBox'} parentid = {this.state.parentid} postid = {postid} user = {user} />):(<div></div>)}
вот функция updateComment, но она не обновляет поддержку CommentListITem
updateComment(comment) {
this.setState({showForm:false})
this.props.updateComment(comment)
}
Есть два способа (ну, несколько, но вот два), вы должны сделать функцию лямбдой, т.е. заменить «функция (подкомментарий, i)» на «(подкомментарий, i) =>», иначе «это» будет ссылаться на this.state.subcomments, или вы можете заменить "function (subcomment, i)" на "function (subcomment, i, subcomments)" и заменить "this.state.subcomments" на "subcomments", отображает третий аргумент как сам массив .
Для полноты позвольте мне добавить, что еще один способ сделать это - определить метод в вашем классе, commentsMap(subcomment, i) ... а затем в вашем конструкторе сделать this.commentsMap = this.commentsMap.bind(this), затем "this" всегда будет ссылаться на созданный вами экземпляр класса, и вы можете сделать "this.state.subcomments.map(this.commentMap)"
нет, это не работает таким образом
Что вы подразумеваете под "не работает"?
есть ли способ поделиться своими файлами?
Я не думаю, что это понадобится. Вы можете отредактировать свой вопрос и распечатать ошибку, которую вы получаете в нем. Вы также можете добавить соответствующий код и более подробное объяснение вашей проблемы.
я добавил, пожалуйста, проверьте
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Попробуй это
{this.state.subcomments.map(function (subcomment, i) {
return (
<SubCommentListItem key = {subcomment.id}
subcomment= {this.state.subcomments}
data = {subcomment} parentid = {commentID}
user = {user} postid = {postid}
yourfunctionname = {() => this.props.yourfunction()}
/>
);
})}
я получаю эту ошибку Предупреждение: Не удается выполнить обновление состояния React для несмонтированного компонента. Это не работает, но указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount. в форме комментария (в subCommentListItem.js:58)
Вам нужно будет внести несколько изменений в код.
Во-первых, функция обновления. Давайте превратим это в стрелочную функцию, чтобы вам не нужно было bind:
updateComment = comment => {
this.setState({ showForm:false })
this.props.updateComment(comment)
}
Теперь просто отправьте ссылку на него в свой реквизит:
<SubCommentListItem
key = {subcomment.id}
data = {subcomment}
parentid = {commentID}
updateComment = {props.updateComment}
user = {user} postid = {postid}
/>
А вот как это можно вызвать внутри SubCommentListItem:
this.props.updateComment(yourComment)
Этот синтаксис такой же, как и в его родительском компоненте.
Кроме того, следующий код:
{this.state.showForm ? (<CommentForm updateComment = {this.updateComment} class = {'subCommentFormBox'} parentid = {this.state.parentid} postid = {postid} user = {user} />):(<div></div>)}
Можно сократить до этого:
{this.state.showForm && <CommentForm updateComment = {this.updateComment} class='subCommentFormBox' parentid = {this.state.parentid} postid = {postid} user = {user} />}
И я бы рекомендовал использовать className в React вместо class.
он говорит TypeError: Невозможно прочитать свойство updateComment неопределенного
Это означает, что this.props не определен, можете ли вы показать мне компонент, использующий его (редактируя свой вопрос)
проверить это изображение awesomescreenshot.com/image/3860951/…
Лол, this не определен... интересно. Покажите мне полный код класса
Неважно, вы используете компонент без сохранения состояния и забыли нам об этом сообщить. Просто используйте props.updateComment и убедитесь, что вы получаете переменную props в своей функции.
Например: const SubCommentListItem = props => { /* your logic */ }.
я исправил эту проблему, теперь проблема в SubCommentListItem.js
когда он вызывает эту функцию updateComment(comment) {this.setState({showForm:false}) this.props.updateComment(comment)}
теперь все работает нормально.
если я устанавливаю состояние и вызываю реквизиты, это тоже не работает, но я делаю только одно, это работает, в чем проблема
Мне нужно будет увидеть объявление вашего класса, вы должны отредактировать свой ответ и просто удалить функции, которые не имеют отношения к вашей проблеме.
вы ошибаетесь, если ваш ответ означает, что updateComment — это функция props в CommentListItem.js, которую я передаю в SubCommentListItem, но updateComment — это функция CommentListItem.js, поэтому, когда я использую <SubCommentListItem key = {subcomment.id} data = {subcomment} parentid = {commentID} updateComment = {this.updateComment} user = {user} postid = {postid} /> , она не работает нормально, я думаю, теперь вы можете мне помочь
я решил это лучше, спасибо, вы мне очень помогли, я понял вашу точку зрения
Хотите использовать реквизит, чтобы я мог перезвонить