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

问题描述

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

标签： javascriptreactjsrenderingreal-timerender

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

问题描述

解决方案

推荐阅读