时间戳

首页 > 解决方案 > 反应在提交页面上打印 axios POST 响应

reactjs - 反应在提交页面上打印 axios POST 响应

问题描述

在此处输入图像描述我对我的烧瓶服务器有一个有效的 axios 发布请求，该请求在其响应中返回 json，如下所示。

{contract: 135.35699844360352}

我可以在我记录它的控制台中看到这个响应，但我无法理解如何将它呈现到我的页面上。

我的主要目标是获取工作响应数据并通过 render() html 显示在页面上。

这是来自 React 的 Form.js 文件：

import React, { Component } from "react";
import axios from "axios";

class Form extends Component {
  constructor(props) {
    super(props);

    this.state = {
      ticker: "",
    };
  }

  handleTickerChange = (event) => {
    this.setState({
      ticker: event.target.value,
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    console.log(this.state);
    axios
      .post("http://127.0.0.1:5000", this.state)
      .then((response) => {
        console.log(response.data);
        this.setState({ contract: response.data });
      })
      .catch((error) => {
        console.log(error);
      });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label>Ticker </label>
          <input
            type="text"
            name="ticker"
            value={this.state.ticker}
            onChange={this.handleTickerChange}
          />
          <button type="submit">Submit</button>
        </div>
        {this.state.contract}
      </form>
    );
  }
}

export default Form;[![enter image description here][1]][1]

标签： reactjs

解决方案

在您的 handleSubmit 函数中检查 response.data 是否为 {contract: 135.35699844360352} 您需要将 setState 函数更改为

 this.setState({ contract: response.data.contract });

或者

const {contract} = response.data
this.setState({ contract: contract });

推荐阅读