React JsはsetState呼び出しでエラーを返します

Question

私は理解できないエラーで遊んでいます。ここで私はページをレンダリングするために使用しているコードです。 SETSTATE（...）：

export class ResourceEdit extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = {"resource" : ""} 
    } 

    getInitialState() { 
    return {successVisible: false}; 
    } 

    componentDidMount() { 
    this.loadData(); 
    } 

    componentDidUpdate(prevProps) { 
    console.log("ResourceEdit: componentDidUpdate", prevProps.params.id, this.props.params.id); 
    if (this.props.params.id != prevProps.params.id) { 
     this.loadData(); 
    } 
    } 

    loadData() { 
    $.ajax('/api/resources/' + this.props.params.id) .done(function(resource) { 
     this.setState(resource); 
    }.bind(this)); 

    } 

    onChangeCategory(e) { 
    this.setState({category: e.target.value}); 
    } 
    onChangeSubcategory(e) { 
    this.setState({subcategory: e.target.value}); 
    } 
    onChangeProduct(e) { 
    this.setState({product: e.target.value}); 
    } 
    onChangeSolution(e) { 
    this.setState({solution: e.target.value}); 
    } 
    onChangeWeight(e) { 
    this.setState({weight: e.target.value}); 
    } 
    onChangeNSOC(e) { 
    this.setState({nsoc: e.target.value}); 
    } 
    onChangeStatus(e) { 
    this.setState({status: e.target.value}); 
    } 

    onChangeDateproductadded(e) { 
    this.setState({date_product_added: e.target.value}); 
    } 
    onChangeDesignstatus(e) { 
    this.setState({design_status: e.target.value}); 
    } 
    onChangeDesigncombined(e) { 
    this.setState({design_combined: e.target.value}); 
    } 
    onChangeImplementstatus(e) { 
    this.setState({implement_status: e.target.value}); 
    } 
    onChangeImplementcombined(e) { 
    this.setState({implement_combined: e.target.value}); 
    } 
    onChangeOperatestatus(e) { 
    this.setState({operate_status: e.target.value}); 
    } 
    onChangeOperatecombined(e) { 
    this.setState({operate_combined: e.target.value}); 
    } 
    submit(e) { 
    e.preventDefault(); 
    var resource = { 
     subcategory: this.state.subcategory, 
     category: this.state.category, 
     product: this.state.product, 
     solution: this.state.solution, 
     weight: this.state.weight, 
     nsoc: this.state.nsoc, 
     status: this.state.status, 
     date_product_added: this.state.date_product_added, 
     design_status: this.state.design_status, 
     design_combined: this.state.design_combined, 
     implement_status: this.state.implement_status, 
     implement_combined: this.state.implement_combined, 
     operate_status: this.state.operate_status, 
     operate_combined: this.state.operate_combined 
    } 

    $.ajax({ 
     url: '/api/resources/' + this.props.params.id, type: 'POST', contentType:'application/json', 
     data: JSON.stringify(resource), 
     dataType: 'json', 
     success(resource) { 
     this.setState(resource); 
     this.showSuccess(); 
     } 
    }); 
    } 

    render() { 
    var success = (
     <Alert bsStyle="success" onDismiss={this.dismissSuccess} dismissAfter={5000}> 
     Resource saved to DB successfully. 
     </Alert> 
    ); 

    return (
     <div style={{maxWidth: 600}}> 
     <Panel header={"Edit resource: " + this.props.params.id}> 
      <form onSubmit={this.submit}> 
      <Input type="text" label="Category" value={this.state.category} onChange={this.onChangeCategory}/> 
      <Input type="text" label="Sub Category" value={this.state.subcategory} onChange={this.onChangeSubcategory}/> 
      <Input type="text" label="Product" value={this.state.product} onChange={this.onChangeProduct}/> 
      <Input type="text" label="Solution" value={this.state.solution} onChange={this.onChangeSolution}/> 
      <Input type="text" label="Weight" value={this.state.weight} onChange={this.onChangeWeight}/> 
      <Input type="text" label="NSOC" value={this.state.nsoc} onChange={this.onChangeNSOC}/> 
      <Input type="text" label="Status" value={this.state.status} onChange={this.onChangeStatus}/> 
      <Input type="text" label="Date" value={this.state.date_product_added} onChange={this.onChangeDateproductadded}/> 
      <Input type="text" label="Design Status" value={this.state.design_status} onChange={this.onChangeDesignstatus}/> 
      <Input type="text" label="Design Players" value={this.state.design_combined} onChange={this.onChangeDesigncombined}/> 
      <Input type="text" label="Implement Status" value={this.state.implement_status} onChange={this.onChangeImplementstatus}/> 
      <Input type="text" label="Implement Players" value={this.state.implement_combined} onChange={this.onChangeImplementcombined}/> 
      <Input type="text" label="Operate Status" value={this.state.operate_status} onChange={this.onChangeOperatestatus}/> 
      <Input type="text" label="Operate Players" value={this.state.operate_combined} onChange={this.onChangeOperatecombined}/> 
      <ButtonToolbar> 
       <Button type="submit" bsStyle="primary">Submit</Button> 
       <Link className="btn btn-link" to="/home">Back</Link> 
      </ButtonToolbar> 
      </form> 
     </Panel> 
     {this.state.successVisible ? success : null} 
     </div> 
    ); 
    } 
} 

私は 不明なエラーを言い、ページの読み込みにエラーを取得しています更新する状態変数のオブジェクトまたは状態変数のオブジェクトを返す関数を取ります。不変で （

でevalの誰かが、私はこのコードで間違っているかを把握助けてください。事前に感謝..

Answer 1

あなたはthisとそれをバインドすることを確認し、機能にthis.setState()を呼び出すたび。これでたとえば、あなたはthisでonChange機能のすべてをバインドする必要があるかもしれません。

あなたがconstructorでそれらをバインドすることができ、その後、あなたはそれを心配やレンダリング機能でそれをバインドする必要はありません。

constructor(props) { 
    super(props); 
    this.state = {"resource" : ""}  

    this.loadData = this.loadData.bind(this) 
    this.onChangeCategory = this.onChangeCategory.bind(this) 
    this.onChangeSubcategory = this.onChangeSubcategory.bind(this) 
    // and more methods to bind... 
} 

この種の練習では、コードをきれいに整えることができるajax呼び出しでbind(this)する必要はありません。

希望すると便利です。