私のコンポーネントが反応で再レンダリングされない理由

Question

状態（私のケースでは提出）が変更されたときにコンポーネントを変更しようとしていました。これまで私は状態を正常に更新していますが（HTTP getではなく）正しくコンポーネントが変更されますが、httpで呼び出した状態が更新されてもコンポーネントは変更されません。この問題を解決するための提案をお願いします。事前のおかげで.... :)

import React from 'react'; 
import { Panel, Grid, Row, Col } from 'react-bootstrap'; 
import styles from './Panels.scss'; 
import Card from '../Card/Card.js'; 
import PanelForm from '../PanelForm/PanelForm'; 
import PanelFormData from '../PanelFormData/PanelFormData'; 
import http from 'axios'; 
export default class Panels extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state={ 
     submitted:0, 
     allocatedBudgetData:this.props.allocatedBudgetData 
    } 
    this.updateStateForm=this.updateStateForm.bind(this); 
    } 

    //this function is called by another component and update the state 
    updateStateForm(){ 
    http.get('./static/PanelReportDataFilled.json') 
     .then((response) => { 
     var submitted=this.state.submitted==0?1:0; 
     console.log('inside http method',submitted); 
     this.setState({ 
     allocatedBudgetData:response.data, 
     submitted:submitted 
     }); 

    }) 

    } 
    render() { 
    console.log('inside render state is ',this.state.submitted); 

    const panelFormInput=(<PanelForm formState={this.state.submitted} formType={this.updateStateForm} role={this.props.role} allocatedBudgetData={this.state.allocatedBudgetData}></PanelForm>); 
    return(
     <Panel header={this.props.title} bsStyle="primary" className={styles['panels']}> 
     <Grid> 
      <Row className="show-grid"> 
      <Col sm={5} md={8}> 
       <div style={{height: "auto"}}> 
       <Card renderchild={panelFormInput} borderRadius={4}/> 
       </div> 
      </Col> 
      </Row> 
     </Grid> 
     </Panel> 
    ) 
} 
} 

Answer 1

私はあなたのAPI呼び出しが原因import http from axiosの場所を取っていないと思います。

これは、あなたが斧を使用する方法ではありません。それはあなたのAPIがaxios私の最初の応答を再考here

Answer 2

についての詳細をお読みください

axios.get('./static/PanelReportDataFilled.json') 
     .then((response) => { 
     var submitted=this.state.submitted==0?1:0; 
     console.log('inside http method',submitted); 
     this.setState({ 
     allocatedBudgetData:response.data, 
     submitted:submitted 
     }); 

    }) 

のようなものでなければなりません

import axios from 'axios'

ようでなければなりません、私は以下がよりよい解決策かもしれないと思います。

セットアップモックAPI次のように、すなわちreportDataApi.js：

"use strict"; 

const reportData = [/* mock out your data here*/ 
    ] 

class ReportDataApi { 
    static getReportData() { 
    return new Promise((resolve, reject) => { 
     setTimeOut(() => { 
     resolve(Object.assign([], reportData)); 
     }, 1000); 
    }); 
    } 
} 

export default ReportDataApi; 

は、その後、あなたのコントローラコンポーネント（私はあなたが投稿コードをリファクタリング）に：

うまくいけば、

... 
import reportDataApi from './static/ReportDataApi'; <- reference to mock API js file 

export default class Panels extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     submitted: 0, 
     allocatedBudgetData: this.props.allocatedBudgetData 
    } 
    this.updateStateForm = this 
     .updateStateForm 
     .bind(this); 
    } 

    //this function is called by another component and update the state 
    updateStateForm() { 
    var submitted = this.state.submitted === 0 ? 1 : 0; 
    console.log('inside http method', submitted); 
    this.setState({allocatedBudgetData: reportDataApi.getReportData, submitted: submitted});       ^^^ Call to mock API 
    } 
    ... 
    ) 
    } 
} 

、これはあなたを取得しますその丘の上。幸運

Answer 3

this.setState（{}）を移動します。 http.getにこのキーワードは親の関数を参照し、httpオブジェクトを参照するようになりました。

試してみてください。

updateStateForm(){ 
    var _self = this; 
    http.get('./static/PanelReportDataFilled.json') 
     .then((response) => { 
     var submitted=this.state.submitted==0?1:0; 
     console.log('inside http method',submitted); 
     _self.setState({ 
     allocatedBudgetData:response.data, 
     submitted:submitted 
     }); 
    }) 
    }