数据库更改时在React中重新呈现组件

问题描述 投票:0回答:1

我正在创建一个组件,它基本上是一个呈现为表格的公寓容器。我正在拯救一系列公寓作为国家财产“公寓”。表的每一行都有一个按钮,它应该通过调用外部API从数据库中删除该行。一切正常,除了......!有没有办法在每次有人在数据库中创建记录时重新渲染这个组件(公寓列表)(这是由我的React应用程序的另一个组件完成的)?

每次数据库更改时重新呈现组件是否正确?

案例1)我打开浏览器,我可以看到项目列表。用户更改数据库,这个项目列表实时更改,我可以看到如何创建项目并从数据库中删除。

案例2)我打开浏览器,我可以再次看到项目列表,在我面前没有任何变化。现在,其他一些人从我的列表中删除项目,我不知道它。我点击这个项目,但该项目不再在数据库中。该怎么办?

那么,这个用例的最佳态度是什么?在这里,您可以看到我的Aparatments Component的代码。

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>
        )
    }
}
javascript reactjs rendering real-time render
1个回答
1
投票

有多种方法可以实现这一目标:

  1. 反应数据库连接,例如Firebase(https://firebase.googleblog.com/2014/05/using-firebase-with-reactjs.html
  2. Websockets - 当平面数据发生变化时,服务器向每个连接的客户端发送消息。
  3. 轮询服务器以获取更新
© www.soinside.com 2019 - 2024. All rights reserved.