Пересчет компонентов в React при изменении базы данных - PullRequest
Новая
       38

Пересчет компонентов в React при изменении базы данных

0 голосов
/ 13 апреля 2019

Я создаю компонент, представляющий собой контейнер квартир, представленный в виде таблицы. Я сохраняю множество квартир в качестве государственной собственности "квартиры". Каждая строка таблицы имеет также одну кнопку, которая также должна удалить эту строку из базы данных, вызвав внешний API. Все работает отлично, кроме ...! Есть ли способ, как изменить этот компонент (список квартир) каждый раз, когда кто-то создает запись в базе данных (это делается другим компонентом моего приложения React)?

Правильно ли повторно отображать компонент при каждом изменении базы данных?

Случай 1) Я открыл браузер и вижу список предметов. Пользователи изменяют базу данных, и этот список элементов изменяется в режиме реального времени, я вижу, как элементы создаются и удаляются из базы данных.

Случай 2) Я открыл браузер, и я снова могу видеть список пунктов, никаких изменений передо мной. Теперь какой-то другой человек удаляет элемент из моего списка, и я не знаю об этом. Я нажимаю на этот элемент, но его больше нет в базе данных. Что делать?

Итак, каково лучшее отношение к этому варианту использования? Здесь вы можете увидеть мой код для моего компонента Aparatments. 

import React, { Component } from 'react';
import axios from "axios";

export default class FlatsLayout extends Component {

    constructor(props) {
        super(props);

        this.state = {
            flats: []
        }
    }



    componentDidMount() {
        axios.get("http://192.168.0.14:4000/flats")
            .then(res => {
                this.setState({flats: res.data});
                console.log(res.data);
            });
    }

    onDeleteFlat(flatID, e) {
        axios.delete("http://192.168.0.14:4000/flats/" + flatID).then( res => {
            console.log(res.data);
        });
        const data = this.state.flats.filter(flat => flat._id !== flatID);
        this.setState({
            flats: data
        });
    }

    render() {
        return (
            <div>
                <h2>Flats</h2>
                <table className="table table-striped table-bordered">
                    <tbody>
                    {
                        this.state.flats.map( flat => {
                            return (
                                <tr key={flat._id}>
                                    ...
                                    <td><a href={flat.URL}>link</a></td>
                                    <td>
                                        <button
                                            type="Button"
                                            className="btn btn-sm btn-danger"
                                            onClick={ (e) => this.onDeleteFlat(flat._id, e)}
                                        >
                                            Remove
                                        </button>
                                    </td>
                                </tr>
                            )
                        })
                    }
                    </tbody>
                </table>
            </div>
        )
    }
}

1 Ответ

1 голос
/ 13 апреля 2019

Есть несколько способов достичь этого:

  1. Реактивное соединение с базой данных, например База огня (https://firebase.googleblog.com/2014/05/using-firebase-with-reactjs.html)
  2. Websockets - сервер отправляет сообщение каждому подключенному клиенту при изменении данных квартир.
  3. Опрос сервера на обновления
...