添加新行後MongoDB React.js更新表

Question

我有兩個連接主要組件的組件。就像這樣：

• 主（父）
  • 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> 


     )} 
} 

的GridView

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：有一個按鈕，點擊該按鈕後，我想要刷新表格數據。

Answer 1

首先，您可能需要更改設計才能實現此目的。也許你可以將按鈕放在MainView中，這會讓事情變得更簡單（只需更新GridView當按鈕用於發送道具或調用getAllConnection和a ref）。

如果您需要/想保持你的組件會是這樣的，用才反應過來，你可以用你的MainView定義的回調函數送它作爲一個屬性您AddConnectionView。使用AddConnectionView（onClick）中的方法（MainView組件的一個函數），您可以發送一個道具到GridView組件或調用getAllConnection。順便說一下，您應該在componentDidMount而不是構造函數中調用getAllConnection。你可以看到這是如何工作here。

您也可以使用Redux或Flux來使用一個集中狀態。