javascript - 添加新行后，来自Mongo DB的React.js更新表

我有两个连接主要组件的组件。像这样：


主（父母）


GridView（子级-表）
AddConnectionView（子级-添加操作）



我可以使用AddConnectionView类成功保存数据。单击AddConnectionView中的保存按钮后，我想更新GridView中的表。我认为我对此感到困惑，因为我该如何使用shouldComponentUpdate函数或可以做什么或解决此问题。

请帮我。谢谢！

这是我的代码：

MainView.tsx

import * as React from "react";
import {GridView} from "./gridView.tsx";
import {AddConnectionView} from "./addConnectionView.tsx";


export class MainSettingsView extends React.Component {

    constructor(props, context: any) {
        super(props, context);
        this.state = {clickedbtnNewConnection:false}
    }


    btnNewConnection = () => {
        this.setState({clickedbtnNewConnection:true});
    }

    render() {
        return (

            <form className="ui form">
                <div className="field">
                    <button type="button" className="ui orange button " onClick={this.btnNewConnection}>

                        <i className="plus icon"></i>
                        Yeni Bağlantı Ekle
                    </button>
                </div>
                <div className="field">
                    <GridView/>
                </div>
                <div className="field">
                    <AddConnectionView clickedBtnNewConnection={this.state.clickedbtnNewConnection} />
                </div>
            </form>


        )}
}

网格视图

import * as React from "react";
import {PrivateConnection} from "../../Connection";
import {PrivateConnectionStates} from "../../ConnectionInterfaces";



export class GridView extends React.Component {

    constructor(props, context: any) {
        super(props, context);
        this.state = {connectionList:[] } as PrivateConnectionStates;

        this.getAllConnection();

    }

    public getAllConnection(event:any):void{
        fetch('/PrivateConnectionService/findAll',
            {
                method: 'GET',
                credentials: 'include',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }
            }).then((response) => {
            var contentType = response.headers.get("content-type");
            if (contentType && contentType.indexOf("application/json") !== -1) {
                return response.json().then( (json) => {
                    // process your JSON further
                    this.setState({
                        connectionList: [...json] as Array<PrivateConnection>
                    } as PrivateConnectionStates);
                    console.log(this.state.connectionList);

                });
            } else {
                console.log("Oops, we haven't got JSON!");
            }
        })
    }


    render() {

        var tableItems = [];
        var size=Object.keys(this.state.connectionList).length;

        for(var i = 0; i < size; i++)
        {
            tableItems.push(<tr key={i+1}><td>{this.state.connectionList[i].connectionName}</td><td>{this.state.connectionList[i].databaseName}</td><td>{this.state.connectionList[i].host}</td><td>{this.state.connectionList[i].port}</td><td>{this.state.connectionList[i].serviceName}</td><td>{this.state.connectionList[i].username}</td><td>{this.state.connectionList[i].password}</td></tr>);
        }



        return (

            <div>
                <table className="ui selectable teal celled table">
                    <thead>
                        <tr className="center aligned">
                            <th>Connection Name</th>
                            <th>Database</th>
                            <th>Host</th>
                            <th>Port</th>
                            <th>Service Name</th>
                            <th>Username</th>
                            <th>Password</th>

                        </tr>
                    </thead>
                    <tbody className="center aligned">
                    {tableItems}


                    </tbody>
                </table>
            </div>


        )}
}

AddConnectionView：有一个按钮，单击该按钮后，我想刷新表数据。

最佳答案

首先，您可能需要更改设计才能做到这一点。也许您可以将按钮放在MainView中，这会使事情变得更容易（当使用按钮发送道具或使用a ref调用GridView时，只需更新getAllConnection即可）。

如果您需要/想要保持组件不变，并且仅使用React，则可以使用在MainView中定义的回调函数将其作为属性发送到AddConnectionView。使用AddConnectionView（onClick）中的该方法（MainView组件的功能），可以将道具发送到GridView组件或调用getAllConnection。顺便说一句，您应该在getAllConnection中而不是构造函数中调用componentDidMount。您可以here看到其工作原理。

您也可以使用Redux或Flux来使用一个集中状态。