私のisLoadingフラグはコンストラクタで真に設定されていません

Question

私は1つの表現コンポーネント（ProjectFormUpdate）とそのコンテナ（ProjectFormUpdateContainer）を使っています。コンテナから、私はドキュメントオブジェクトProjectとフラグisLoadingを送信します。しかし、ProjectFormUpdateのConstructor（）では、フラグはfalseです...状態は設定されません。

表現componente

import React, { Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import { Projects } from '/imports/api/projects.js'; 
import PropTypes from 'prop-types'; // ES6 
import { withTracker } from 'meteor/react-meteor-data'; 


export default class ProjectFormUpdate extends Component { 
    handleUpdate(event) { 
    event.preventDefault(); 
    console.log("se modificó el estadoooo") 
    this.setState({ 
     codigo: ReactDOM.findDOMNode(this.refs.codigoInput).value.trim(), 
     nombre: ReactDOM.findDOMNode(this.refs.nombreInput).value.trim() 
    }); 

    } 

    handleSubmit(event){ 

    this.setState({ 
     codigo: ReactDOM.findDOMNode(this.refs.codigoInput).value.trim(), 
     nombre: ReactDOM.findDOMNode(this.refs.nombreInput).value.trim() 
    }); 

    } 


    constructor(props) { 
     super(props);   
     if (!props.isLoading){ 

     this.state = {  
      codigo: props.oneProject.codigo, 
      nombre: props.oneProject.nombre}  
     } 
     else{ 

      this.state = {  
      codigo: 'dd', 
      nombre: 'ff'}  
     } 
     } 

    render() { 

    const { oneProject, isLoading } = this.props; 

    if (!isLoading){ 
     this.setState = {  
      codigo: this.props.oneProject.codigo, 
      nombre: this.props.oneProject.nombre}  




    return (
     <div className="col-xs-11"> 
     <div className="box box-solid"> 
     <form className="form" onSubmit={this.handleSubmit.bind(this)} > 
     <div className="box-body"> 
        <div className="row"> 
          <div className="col-xs-2"> 
           <input 
           className = "form-control input-sm" 
           type="text" 
           ref="codigoInput" 
           placeholder="Código del Proyecto" 
           value = {this.state.codigo}//this.state.codigo} 
           onChange = {this.handleUpdate.bind(this)} 
           /> 
          </div> 
          <div className="col-xs-6"> 
           <input 
           className = "form-control input-sm" 
           type="text" 
           ref="nombreInput" 
           placeholder="Título" 
           value = {this.state.nombre } 
           onChange = {this.handleUpdate.bind(this)} 
           /> 
          </div> 
       </div> 


     </div> 
     <div className="box-footer"> 
     <button type="submit" className="btn btn-sm btn-primary btn-flat">Guardar</button> 
     </div> 
     </form> 
    </div> 
    </div> 

    ); 
    } 
    else {return (<div></div>);} 
}} 

ProjectFormUpdate.propTypes = { 
    // This component gets the task to display through a React prop. 
    // We can use propTypes to indicate it is required 
    oneProject: React.PropTypes.object, 
    isLoading: React.PropTypes.bool, 
}; 

コンテナ

import { Meteor } from 'meteor/meteor'; 
import { withTracker } from 'meteor/react-meteor-data'; 
import { Projects } from '/imports/api/projects.js'; 
import ProjectFormUpdate from './ProjectFormUpdate.jsx'; 

export default ProjectFormUpdateContainer = withTracker(({ key1 }) => {  
    const sub = Meteor.subscribe('projects');   
    var oneProject = Projects.findOne(key1); 
    var isLoading = !sub.ready();  
    return { 
     oneProject, 
     isLoading, 
    };  
})(ProjectFormUpdate); 

そう...私は状態を設定することができないならば、私はコントロールさのように、フォームの値を設定することはできません。なにか提案を？

Answer 1

constructor()機能の外でコンポーネントの状態を設定するには、this.setState()に電話する必要があります。 this.setState()は新しい状態として最初の引数を設定し、続いてコンポーネントのrender関数を呼び出します。

if (!isLoading)のステートメントは非常に危険です。仮定すると!isLoading == true：あなたのレンダリング機能は無限にthis.setState()を発射し、それによってブラウザをロックします。

あなたのコンストラクタ関数はそのまま現われます。私は最初のアプリケーションの状態を設定し、残りの部分をrender()関数内から処理することを許可します。また、componentWillMount()またはcomponentDidMount()ファンクションfound here内に初期状態を設定することもできます。

render()の機能の中で、if (!isLoading)の部分を省略し、ローディングコンポーネントif (isLoading == true)を返すようにしてください。

また、技巧を使用して、コンポーネントの状態を設定するためにあなたの<input/>要素に直接、次のロジックを適用することができます。次のように私はあなたのProjectFormUpdateコンポーネントを改訂しました

<input value={this.state.key} onChange={(event) => this.setState({key: event.target.value})}/> 

：用

import React, { Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import { Projects } from '/imports/api/projects.js'; 
import PropTypes from 'prop-types'; // ES6 
import { withTracker } from 'meteor/react-meteor-data'; 

export default class ProjectFormUpdate extends Component { 

handleSubmit(event){ 
    event.preventDefault() 
    console.log() 
} 


constructor(props) { 
    super(props); 
    if (!props.isLoading) { 
    this.state = { 
     codigo: props.oneProject.codigo, 
     nombre: props.oneProject.nombre 
    } 
    } 
    else { 
    this.state = { 
     codigo: '', 
     nombre: '' 
    } 
    } 
} 

render() { 

    const { oneProject, isLoading } = this.props; 

    if (isLoading) { 
    return (
     <div>isLoading == true</div> 
    ) 
    } 

    return (
    <div className="col-xs-11"> 
     <div className="box box-solid"> 
     <form className="form" onSubmit={this.handleSubmit.bind(this)} > 
      <div className="box-body"> 
      <div className="row"> 
      {/* Codigo. */} 
      <div className="col-xs-2"> 
       <input className = "form-control input-sm" type="text" ref="codigoInput" placeholder="Código del Proyecto" value={this.state.codigo} onChange={(event) => this.setState({codigo: event.target.value})} /> 
      </div> 

      {/* Nombre. */} 
      <div className="col-xs-6"> 
       <input className = "form-control input-sm" type="text" ref="nombreInput" placeholder="Título" value={this.state.nombre} onChange={(event) => this.setState({nombre: event.target.value}))} /> 
      </div> 
      </div> 
      </div> 
      <div className="box-footer"> 
      <button type="submit" className="btn btn-sm btn-primary btn-flat">Guardar</button> 
      </div> 
     </form> 
     </div> 
    </div> 
) 
} 

ProjectFormUpdate.propTypes = { 
    oneProject: React.PropTypes.object, 
    isLoading: React.PropTypes.bool, 
};