Как повторно отрисовать ту же страницу на клике в реакции

Question

Я написал этот код, используя response и redux

class BooksContainer extends Component {

    componentDidMount = () => {
        const category = this.props.category;
        this.props.searchBook(category);
        this.props.fetchBook();
    }
    handleClickPrevious = () => {
        console.log('clicked on previous: ' + this.props.previous)
        this.props.urlprev(this.props.previous)
    }
    handleClickNext = () => {
        console.log('clicked on next: ' + this.props.next)
        this.props.urlnext(this.props.next)
    }

    render() {
        const books = this.props.books;
        let content = books

        content = books.length > 0 ?
            books.map(({ subjects, formats, title, authors }, index) => {
                subjects = subjects.join()
                if (subjects.includes('fiction') === true || subjects.includes('Fiction') === true) {
                    return (<div key={index} className="col-md-3 mb-5" >
                        <div className="card card-body bg-dark text-center h-100">
                            <img className="w-100 mb-2" src={formats['image/jpeg'] || close} alt="Book Cover" />
                            <h5 className="text-light text-left card-title">
                                {title}
                            </h5>
                            <p className="text-light text-left">
                                {authors.map(({ name }) => name)}
                            </p>
                        </div>
                    </div>)
                }
            }
            )
            : null;
        return (
            <div>
                <div className="row">
                    {content}
                </div>
                <div>
                    <div className="d-flex justify-content-between">
                        <img className="bg-dark" src={left} alt="previous" onClick={this.handleClickPrevious} />
                        <img className="bg-dark" src={right} alt="next" onClick={this.handleClickNext} />
                    </div>

                </div>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    books: state.books.books,
    next: state.books.next,
    previous: state.books.previous
})

export default connect(mapStateToProps, { searchBook, fetchBook, urlprev, urlnext })(BooksContainer);

в методе return, когда я нажимаю next или prev, он должен отображать книги по следующей ссылке, предоставленной API Api -> http://skunkworks.ignitesol.com:8000/books. Я хочу перерисовать тот же компонент с книгами, полученными по следующей или предыдущей ссылке. Я пытался использовать shouldComponentUpdate, но он не работает, если я использую shouldComponentUpdate, то текущие книги также не отображаются

Answer 1

Ваш компонент будет автоматически перерисовываться при любом изменении зависимости, которое является реквизитом или состоянием, вы также можете сделать это this.forceUpdate (), но это крайне не рекомендуется.

Учитывая, что ваш компонент подключен к хранилищу Redux,отправка действия для изменения выбранного в данный момент элемента также вызовет повторное рендеринг компонента. В настоящее время я выбрал бы в качестве избыточного хранилище в качестве переменной, которую я бы изменил и извлек через mapStateToProps в свой компонент, после чего вы могли бы использовать действия, чтобы вызвать изменение текущего выбранного элемента и, таким образом, обновить реквизиты компонентов, эффективно его перерисовав