2017-09-02 14 views
0

私はRailsアプリケーションを実行しており、ビューに対してReactを使用しています。私の主なコンポーネントでは、Railsオブジェクトが空であるかどうかを調べています。空の場合は、コンポーネントが1つ表示されます。オブジェクトが空でない場合、別のコンポーネントが表示されます。論理チェック後のリアクションで自動リフレッシュする方法

if (this.props.projects.length > 0){ 
     var projectList = <Project_list projects={this.state.projects} /> } 
    else { 
     var projectList = <Noproject /> 
    } 

これは正常に動作しますが、私はその最初の新しいプロジェクトを作成し、それをオブジェクトに追加されますと、私はページをロードするために他のコンポーネントを取得するための非常に最初の時間をリフレッシュする必要があります。その後、Reactロジックは、リフレッシュすることなく、表示されたリストにオブジェクトを動的に追加します。

ページを更新する必要はありませんか、自動ページリフレッシュすることなく、他のコンポーネントをロードする別の方法があるので、あなたはこのロジックチェックを実行する方法を
class Projects extends React.Component { 
constructor(props) { 
    super(props) 
    this.state = { 
     projects: this.props.projects, 
     project_name: '', 
     project_zipcode: '', 
     project_timeframe: '', 
     project_supplier: '', 
     showModal: false 
    } 
} 


openModal =() => { 
    this.setState({ 
     showModal: true 
    }); 
} 

closeModal =() => { 
    this.setState({ 
     showModal: false, 
     project_name: '', 
     project_zipcode: '', 
     project_timeframe: '', 
     project_supplier: '' 
    }); 
} 

handleUserInput(obj) { 
    this.setState(obj); 
} 

handleFormSubmit() { 
    const project = { 
     name: this.state.project_name, 
     zipcode: this.state.project_zipcode, 
     timeframe: this.state.project_timeframe,   
     supplier: this.state.project_supplier 
    }; 
    $.post('/projects', 
     {project: project}) 
     .done((data) => { 
      this.addNewProject(data); 
     }); 
    this.setState({ 
     showModal: false 
    }) 
} 

addNewProject(project){ 
    const projects = update(this.state.projects, { $push: [project]}); 
    this.setState({ 
     projects: projects.sort(function(a,b){ 
      return new Date(b['updated_at']) - new Date(a['updated_at']); 
     }) 
    }); 
    this.setState({ 
     project_name: '', 
     project_zipcode: '', 
     project_timeframe: '', 
     project_supplier: '' 
    }) 
} 

render() { 

    if (this.props.projects.length > 0){ 
     var projectList = <Project_list projects={this.state.projects} /> } 
    else { 
     var projectList = <Noproject /> 
    } 

    return (

     <div> 
      <h2>Start a New Project</h2> 
       <Button 
        bsStyle="success" 
        bsSize="large" 
        onClick={this.openModal} > 
        Create a New Project 
       </Button> 

       <Modal show={this.state.showModal} onHide={this.closeModal}> 
        <Modal.Header closeButton> 
        <Modal.Title>Create a New Project</Modal.Title> 
        </Modal.Header> 
        <Modal.Body> 

        <Project_form 
        project_name={this.state.project_name} 
        project_zipcode={this.state.project_zipcode} 
        project_timeframe={this.state.project_timeframe} 
        project_supplier={this.state.project_supplier} 
        onUserInput={(obj) => this.handleUserInput(obj)} 
        onFormSubmit={() => this.handleFormSubmit()} /> 

        </Modal.Body> 
        <Modal.Footer> 
        <Button onClick={this.closeModal}>Cancel</Button> 
        </Modal.Footer> 
       </Modal> 



       <div className="col-md-12">      
        <div className="table-responsive"> 
         {projectList} 
        </div>        
       </div>     
     </div> 

     ) 
} 
} 

const destination = document.querySelector(".projects") 

document.addEventListener('DOMContentLoaded',() => { 
const node = document.getElementById('projects_data') 
const data = JSON.parse(node.getAttribute('data')) 
ReactDOM.render(
<Projects projects={data} />, 
destination) 

}) 

:ここ

は、メインコンポーネントファイルです?

+0

方が良いだけでサイドノートを助けることができるでしょう命名規則。反応の中の成分は、通常PascalCaseで名前が付けられます。だから私はそれらをProjectListとNoProjectと呼ぶでしょう。 –

答えて

0

私はあなたの質問がもう少し詳細を必要と思う..それは何ですかupdate方法ですか?それはサーバーへの呼び出しですか?それは何を返すのですか?また、第2はsetStateとは何ですか? 1回の呼び出しですべてsetStateを実行してみませんか?

プロジェクトは小道から出ていますか?状態が維持されている場合、this.props.projectsthis.state.projectsに変更すると、状態が変更されるとコンポーネントが更新されます。

あなたはcomponentWillMountまたはそのような何かにあなたのRailsのデータをthis.state.projectsを初期化することができます。..

あなたが少しより多くのコードを共有している場合、私はあなたのコンポーネントに

+0

それが役に立つなら、私はメインコンポーネントファイルを追加しました。 – JohnOHFS

+0

addNewProjectはthis.props.projectsを実際に更新しますか?レンダリングメソッドの状態でthis.state.projectsを使用しないでください。 –

+0

renderメソッドでthis.state.projectsを使用するにはどうすればよいですか? this.props.projectをステートフルな要素にすることなく、addNewProjectが呼び出されたときにコンポーネントをロードする簡単な方法があるのか​​どうか疑問に思っていました... – JohnOHFS

関連する問題