Question

所以当我改变状态（在我提交的情况下）时，我试图改变我的组件。当我正常更新状态（不在http get内）时它会正确地改变我的组件但是当我在http内部做同样的事情时，get get状态会更新，但我的组件不会改变。请给出解决这个问题的任何建议。在此先感谢.... :)

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电话不是因为from django.shortcuts import get_object_or_404 def bar(request): ... record = get_object_or_404(model, **kwargs) ... return JsonResponse(data_to_response)而发生的。

这不是你使用axios的方式。它应该是

import http from axios

您的API应该类似

import axios from 'axios'

请阅读有关axios here

的更多信息

Answer 2

移动this.setState（{}）;进入http.get， this 关键字现在引用父的函数，因此引用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
      });
    })
  }

Answer 3

重新考虑我的初步回应，我认为以下可能是更好的解决方案。

按如下方式设置模拟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
  }
     ...
    )
  }
}

希望这会让你超越那个驼峰。祝你好运

为什么我的组件没有重新渲染反应

3 个答案: