React新手求助：点击按钮时如何在getAllBooks函数实现书籍数据展示

其实你的需求很好实现，核心就是把原本在componentDidMount里自动执行的store.getAll()，移到点击按钮触发的getAllBooks函数里就可以了。具体操作如下：

1. 完善getAllBooks函数：在函数内部直接调用store.getAll()即可。因为你的组件已经在componentDidMount中注册了'BOOK LOAD'事件监听器，当BookStore完成数据加载后，会通过emitter触发这个事件，组件就会自动更新state里的书籍列表。
2. 可选优化：如果不希望页面一加载就自动获取书籍数据，可以把componentDidMount里的store.getAll()删掉，这样只有点击按钮时才会发起数据请求。

下面是修改后的完整代码：

import React, {Component} from 'react'
import BookStore from './BookStore'
import {EventEmitter} from 'fbemitter'
const emitter= new EventEmitter()
const store= new BookStore(emitter)

class BookList extends Component{
 constructor(props){
 super(props)
 this.state= {
 books: []
 }
 }

 componentDidMount(){
 // 移除自动加载的store.getAll()，如果不需要页面初始化就加载数据的话
 emitter.addListener('BOOK LOAD', ()=>{
 this.setState({books: store.content})
 })
 this.getAllBooks = this.getAllBooks.bind(this);
 }

 getAllBooks(){
 // 调用store的getAll方法触发数据加载
 store.getAll()
 }

 render(){
 return (
 <div>
 <div>
 <h3>The Books:</h3>
 <br></br>
 <div>
 { this.state.books.map((b)=>
 <div>{b.title +' by '+ b.author}</div>
 ) }
 </div>
 </div>
 <input type="button" value="All Books" onClick={this.getAllBooks}/>
 </div>
 )
 }
}

export default BookList

补充说明 #

• 你的BookStore里的getAll方法应该已经实现了从数据库获取数据、更新store.content，最后通过emitter.emit('BOOK LOAD')通知组件更新的逻辑（否则你的原代码也无法正常工作）。
• 如果点击按钮后没有反应，建议检查BookStore的getAll方法是否正确触发了'BOOK LOAD'事件，以及store.content是否正确存储了获取到的书籍数据。

内容的提问来源于stack exchange，提问作者Delia