Как обновить состояние в React?

Question

Я бы хотел обновить состояние и отобразить текущее состояние в React Fragment внутри метода. Я обновляю метод состояния в резерве и хочу отображать новое значение при нажатии кнопки. Я пытался сделать это в диапазоне в методе fetchData (), но когда я нажимаю кнопку, я не вижу обновленное значение. Ниже приведен снимок экрана приложения и кода.

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 => 
            
                {book.id} - {book.title} - {book.author}
                 this.reserve(book.id)}>Reserve {book.quantity}
                {this.state.booksData.quantity}
            )

            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 (
           {this.state.books} )} резерв (id) {console.log ("нажал") this.setState ({booksData: this.state.booksData.map (item => {if (item.id === id) {return { ... элемент, количество: (item.quantity - 1)> = 0? (item.quantity - 1): 0};} else {return item;}})})}} экспортировать компонент BooksComponent по умолчанию 

Answer 1

Не храните jsx в своем состоянии, сохраните данные и позвольте React обрабатывать рендеринг, поэтому просто сделайте это в своей fetchData функции

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

и в вашем рендере

<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>

Это будет повторно визуализироваться при изменении состояния и отобразить правильное значение