Question

我正在创建一个组件，该组件基本上是呈现为表格的公寓的容器。我正在将一系列公寓保存为州财产“单位”。表的每一行都有一个按钮，该按钮也应该通过调用外部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>
        )
    }
}

Answer 1

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

反应式数据库连接，例如Firebase（https://firebase.googleblog.com/2014/05/using-firebase-with-reactjs.html）
Websockets-单位数据更改后，服务器向每个连接的客户端发送消息。
轮询服务器以进行更新

数据库更改时在React中重新渲染组件

1 个答案: