我的isLoading標志從未在構造函數（）中設置為true

Question

我正在使用一個代表性組件（ProjectFormUpdate）和他的容器（ProjectFormUpdateContainer）。 從容器中，我發送一個文檔對象Project和一個標志isLoading。 但是在ProjectFormUpdate的Constructor（）中，該標志為false ...永遠不會設置狀態。

代表性的組成部分

    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()函數中設置初始狀態。

在您的render()函數中，我將省略if (!isLoading)部分，而是嘗試返回一個加載組件if (isLoading == true) 。

您還可以將以下邏輯直接應用於<input/>元素，以巧妙地設置組件的狀態：

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

我已經對您的ProjectFormUpdate組件進行了如下修改：

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,
};