React.js新しい行を追加した後のMongo DBからのテーブルの更新

Question

私は主なコンポーネントを接続する2つのコンポーネントを持っています。このように： -

AddConnectionView

• メイン（親）
  • のGridView（表子供）（子供 - オペレーションを追加）

私が使用してデータを正常に保存することができます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：ありボタンがあり、後にボタンをクリックし、Iテーブルのデータを更新したい。

Answer 1

まず、これを行うためにデザインを変更したい場合があります。たぶんボタンをMainViewに置くだけで簡単にできます（GridViewをボタンを使って送信するかgetAllConnectionをa refで呼び出すだけです）。

あなただけリアクトあなたのコンポーネント彼らは道を維持し、使用したい/必要がある場合は、あなたのAddConnectionViewのプロパティとしてそれを送信するためにあなたのMainViewにが定義されてコールバック関数を使用することができます。 AddConnectionView（onClick）にそのメソッド（MainViewコンポーネントの関数）を使用すると、GridViewコンポーネントに小道具を送信したり、getAllConnectionを呼び出すことができます。ちなみに、getAllConnectionはコンストラクタの代わりにcomponentDidMountに電話する必要があります。これがどのように動作するか見ることができますhere。

ReduxまたはFluxを使用して、1つの集中化された状態を使用することもできます。