如何在反应中更新 state？

Question

I'd like to update the state and display the current state in a React Fragment inside a method. I'm updating the state in reserve method and I'd like to display the new value on a button click. I was trying to do that in the span in fetchData() method but when I click the button, I don't see the updated value. Below is the screen shot of the application and code.

class BooksComponent extends Component{

    constructor(props){
        super(props)
        this.state ={
            booksData: [],
            offset: 0,
            perPage: 3,
            currentPage: 0,
        }
        this.reserve = this.reserve.bind(this)
        this.fetchData = this.fetchData.bind(this)
    }

    fetchData(){
        axios.get('/library')
          .then(res => {
            const booksData = res.data
            const slice = booksData.slice(this.state.offset, this.state.offset + this.state.perPage)
            const books = slice.map(book => 
            <React.Fragment key={book.id}>
                <p>{book.id} - {book.title} - {book.author}</p>
                <button onClick={() => this.reserve(book.id)}>Reserve {book.quantity}</button>
                <span>{this.state.booksData.quantity}</span>
            </React.Fragment>)

            this.setState({ 
                pageCount: Math.ceil(booksData.length / this.state.perPage),
                books })
          })
    }

    handlePageClick = (e) => {
        const selectedPage = e.selected;
        const offset = selectedPage * this.state.perPage;

        this.setState({
            currentPage: selectedPage,
            offset: offset
        }, () => {
            this.fetchData()
        });
    };
    
    componentDidMount() {
        this.fetchData()
    }
    
    render() {
        return (
          <div className="App">
              {this.state.books}
            <ReactPaginate
                    previousLabel={"prev"}
                    nextLabel={"next"}
                    breakLabel={"..."}
                    breakClassName={"break-me"}
                    pageCount={this.state.pageCount}
                    marginPagesDisplayed={2}
                    pageRangeDisplayed={5}
                    onPageChange={this.handlePageClick}
                    containerClassName={"pagination"}
                    subContainerClassName={"pages pagination"}
                    activeClassName={"active"}/>
          </div>
        )
    }

    reserve(id) {
        console.log("clicked")
        this.setState({
            booksData: this.state.booksData.map(item => {
                if (item.id === id) {
                    return { ...item, quantity: (item.quantity - 1) >= 0 ? (item.quantity - 1) : 0};
                } else {
                    return item;
                }
            })
        })
    }
}


export default BooksComponent

Answer 1

Don't store jsx in your state, store the data and let React handle the render, so, just do this in your fetchData function

this.setState({ 
  pageCount: Math.ceil(booksData.length / this.state.perPage),
  books
})

and in your render

<div className="App">
  {this.state.books.map(book => 
    <React.Fragment key={book.id}>
      <p>{book.id} - {book.title} - {book.author}</p>
      <button onClick={() => this.reserve(book.id)}>Reserve {book.quantity}</button>
      <span>{this.state.booksData.quantity}</span>
    </React.Fragment>
  )}
  <ReactPaginate...
</div>

This will re-render when the state changes and will display the correct value