0

Как правильно реализовать обновление React, не получается.

Есть такой код:

'use strict';

// tag::vars[]
const React = require('react');
const ReactDOM = require('react-dom');
const client = require('./client');
// end::vars[]

// tag::app[]
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {books: []};
        this.onDelete = this.onDelete.bind(this);
    }

    onDelete(book) {
        client({method: 'POST', path: 'http://localhost:8080/main/book/' + book.id + '/delete'}).done(response => {
            console.log('onDelete: ', book.id)
        });
    }

    componentDidMount() {
        client({method: 'GET', path: 'api'}).done(response => {
            console.info("componentDidMount response: %o", response);
            this.setState({books: response.entity});

        });
    }

    render() {
        return (
            <BookList books={this.state.books} onDelete={this.onDelete}/>
        )
    }
}
// end::app[]

// tag::book-list[]
class BookList extends React.Component{
    constructor(props) {
        super(props);
    }

    render() {
        var books = this.props.books.map(book =>
            <Book key={book.id} book={book} onDelete={this.props.onDelete}/>
        );
        return (
            <table id="example" className="display nowrap" style={{width: '100%'}}>
                <tbody>
                    <tr>
                        <th>Название</th>
                        <th>Автор</th>
                        <th>Издательство</th>
                        <th>Год издания</th>
                    </tr>
                    {books}
                </tbody>
            </table>
        )
    }
}
// end::book-list[]

// tag::book[]
class Book extends React.Component{
    constructor(props) {
        super(props);
        this.handleDelete = this.handleDelete.bind(this);
    }

    handleDelete() {
        this.props.onDelete(this.props.book);
    }

    render() {
        const { id, name, author, publishing_house, the_year_of_publishing } = this.props.book;

        return (
            <tr>
                <td><a href={"http://localhost:8080/main/book/book?id=" + id}>{name}</a></td>
                <td onClick={() => { this.handleDelete() }}>{author}</td>
                <td>{publishing_house}</td>
                <td>{the_year_of_publishing}</td>
            </tr>
        )
    }
}
// end::book[]

// tag::render[]
ReactDOM.render(
    <App />,
    document.getElementById('react')
)
// end::render[]

Книга удаляется на сервере, но на странице ничего не меняется - только после перезагрузки страницы. Как обновить this.state.books?

1 ответ 1

0

Выправил, подправив метод:

onDelete(book) {
    client({method: 'POST', path: 'http://localhost:8080/main/book/' + book.id + '/delete'}).done(response => {
        console.log('onDelete: ', book.id);
        client({method: 'GET', path: 'api'}).done(response => {
            console.info("onDelete response: %o", response);
            this.setState({books: response.entity});
        });
    });
}

Если есть лучшая реализация, дайте, пожалуйста, знать.

1
  • мне кажется setState это как раз то, что нужно:) 22 апр 2018 в 15:06

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.