Question

在我的react应用程序中，我有一个包含一组字符串项的状态。我可以使用以下代码成功将此项目呈现为html：

 renderList(){    
        return this.props.books.map((book)=>{

           return(
           <li key={book.title}   onClick={()=>{this.props.selectedBook(book)}}>
                  {book.title}
           </li>);
            });
}

但当我将功能更改为(book)=>{this.props.selectedBook(book)}时然后它在selectedBook函数内部抱怨book是undefined。

所以我在徘徊

之间的区别

()=>{this.props.selectedBook(book)}  //book is shown with no problem

和

(book)=>{this.props.selectedBook(book)} //book is undefined

对我来说，他们两个在第一个版本中是相同的，我得到了我的组件中已有的书，但在第二个版本中，我只是将它作为参数传递。那么为什么我在第二本书中将书定义为未定义？

更新

selectedBook是一个动作创建者，所以一旦收到一本书，它就会为它做一个动作。

export default function(book){
  console.log(book);
  return({
    type:'Selected_Book',
    payload:book
  });
}

Answer 1

你开始陷入变幻莫测的范围。

当您将函数定义中的book对象定义为(book) =>时，您将该引用放在范围内。没有它，book引用实际上来自this.props.books.map((book)=>，因此函数会收到有效的book引用。

我觉得奇怪的是，你没有将事件传递给selectedBook方法，但我无法在不查看来源的情况下进一步评论（如果这很重要，请更新你的问题给你）。

将参数传递给打字稿箭头函数

1 个答案: