无法更新类react js中axios响应的状态

液体死亡

我无法在类组件中使用 axios 响应更新状态。它适用于基于功能的组件。有人可以指出是什么导致了这个问题。我是新手，并尝试了大多数可能的答案。

代码：

import React, { Component } from "react";
import "./Table.css";
import { Button } from "./Button";
import { Table } from "react-bootstrap";
import axios from "axios";
import Example from "./Progress";

class Tables extends Component {
  constructor(props) {
    super(props);
    this.state = {
      submitted: false,
      task_id: "",
    };
    this.handlesubmit = this.handlesubmit.bind(this);
  }

  handlesubmit(event) {
    var self = this;
    event.preventDefault();
    axios({
      method: "post",
      url: "http://127.0.0.1:8000/api/test/",
      data: {
        project_name: "test",
      },
    }).then(function (response) {
      console.log(response.data.task_id); //prints taskid (12345678)
      self.setState({
        task_id: response.data.task_id,
      });
      console.log(self.task_id); //prints undefined
    });
    this.setState({ submitted: true }); //works fine, state is set to true
    console.log(this.task_id); //prints undefined
  }

  render() {
    let modal;
    let task_id = this.state.task_id;
    let submitted = this.state.submitted;
     if (submitted === true) {
     modal = <Example pro="test" task={task_id} />;
      }

    return (
      <div className="table-div">
        <Button
          buttonStyle="btn--secondary"
          buttonSize="btn--small--opt"
          onClick={this.handlesubmit}
        >
          test
        </Button>
        {modal}
      </div>
    );
  }
}

export default Tables;

转到1

当调用成功时，你应该更新你的state内部：thenaxios

handleSubmit(event) {
  event.preventDefault();
  axios({...})
    .then((response) => { 
      this.setState({
        task_id: response.data.task_id,
        submitted: true
      })
    })
    .catch((error) => { /* handle errors appropriately */ })
}

然后，在您的render方法中，在渲染之前确保task_id和submitted具有适当的值modal：

render() {
  const { task_id, submitted } = this.state
  const modal = submitted && task_id !== ""
    ? <Example pro="test" task={task_id} />
    : null // don't render anything

  return (
    <div className="table-id">
      <Button ...>test</Button>
      {modal}
    </div>
  )
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。